Встроенные блоки не выравнивая правильно

У меня есть проблема с тремя дивы, которая должна выравнивать так, что две дивы (Div1 и div2) находятся на левой и один DIV (div3, что столь же высок, как в сочетании див1 и div2) находится справа. Я не уверен, как его разрешить, и я бы не хотел использовать float, так как третий div должен быть рядом с этими двумя div, а не jsut, плавающими вправо.Встроенные блоки не выравнивая правильно

HTML:

<div class="container"> 
<div class="test1"> 
</div> 
<div class="test3"> 
</div> 
<div class="test2"> 
</div> 
</div>

CSS:

.container { 
    width:260px; 
} 

.test1 { 
    display:inline-block; 
    vertical-align:top; 
    width:200px; 
    height:50px; 
    background-color:red; 
} 
.test2 { 
    display:inline-block; 
    vertical-align:top; 
    width:200px; 
    height:50px; 
    background-color:blue; 
} 
.test3 { 
    display:inline-block; 
    width:50px; 
    height:100px; 
    background-color:black; 
}

Вот скрипку: Fiddle

Не могли бы вы помочь мне с этим? Это можно сделать с помощью другой техники, но эти элементы должны склеиваться, а не просто плавать, потому что, когда я делаю ее отзывчивой, тогда плавающие элементы будут отделяться.

источник

2014-10-23 Pe-Ter

Если третий должен быть также в непосредственной близости от 2-дивы, почему не всплывают все из них левый. Я имею в виду, что семантическая цель поплавка - это сделать это правильно? – Fyre

Потому что тогда div3 попадает между div1 и div2. Даже когда все три плавают. –

Еще одна вещь, которая может быть причиной, заключается в том, что ваш контейнер недостаточно велик, чтобы разместить все три div. Общая ширина divs равна 450px, где ваш контейнер имеет всего 260 пикселей. Попробуйте увеличить ширину до 500 пикселей. – Fyre

Вы можете использовать положение объект

.test1 
{ 
position:absolute; 
top:0; 
left:0; 
width:200px; 
height:50px; 
background-color:red; 
} 
.test2 
{ 
position:absolute; 
top:50px; 
left:0; 
width:200px; 
height:50px; 
background-color:blue; 
} 
.test3 
{ 
position:absolute; 
top:0; 
left:200px; 
width:50px; 
height:100px; 
background-color:black; 
}

ВАЖНОГО
Не забудьте установить родительскую позицию относительно

.container { 
width:260px; 
position:relative; 
margin:10px; 
}

источник

2014-10-23 12:35:52

Спасибо, но абсолютное позиционирование здесь не будет работать, так как есть изображение слева от этих двух div. Это заставит их исчезнуть за этим изображением. –

Я думаю, что он не исчезнет. Вы пробовали? –

Да, я пробовал, но я не могу опубликовать DOM из моего проекта, потому что он классифицирован. –

<div class="container"> 
<div class="test1"> 
</div> 
<div class="test3"> 
</div> 
<div class="test2"> 
</div> 
</div> 
<style> 
.test2 { 
display: inline-block; 
width: 200px; 
height: 50px; 
background-color: blue; 
} 
.test1 { 
display: inline-block; 
width: 196px; 
height: 50px; 
background-color: red; 
} 
.test3 { 
width: 50px; 
height: 100px; 
background-color: black; 
display: inline-block; 
} 
</style>

источник

2014-10-23 12:40:57

Вы пробовали с отрицательным маржинальным дном для div3 и vertical-align: средний для других divs?

Просто добавьте

margin-bottom: -50px;

Мой код здесь: jsfiddle

источник

2014-10-23 13:14:50 Kisiou

Попробуйте это изменение:

.test3 { 
     display:inline-block; 
     width:50px; 
     height:100px; 
     background-color:black; 
     margin-bottom: -50%; 
     vertical-align: top; 
    }

http://jsfiddle.net/xyfryc2j/

Может быть, вы можете также использовать "позицию: абсолютная", если размеры фиксированы:

.container { 
    position: relative; width: 250px; height: 100px; 
} 
.test1 { 
    position: absolute; top: 0; left: 0; 
    width:200px; 
    height:50px; 
    background-color:red; 
} 
.test2 { 
    position: absolute; bottom: 0; left: 0; 
    width:200px; 
    height:50px; 
    background-color:blue; 
} 
.test3 { 
    position: absolute; top: 0; right: 0; 
    width:50px; 
    height:100px; 
    background-color:black; 
}

http://jsfiddle.net/nmg4ek3j/1/

Вы также можете использовать поплавки для вашей цели:

.container { 
    width: 250px; 
} 
.test1 { 
    float: left; 
    width:200px; 
    height:50px; 
    background-color:red; 
} 
.test2 { 
    float: left; 
    width:200px; 
    height:50px; 
    background-color:blue; 
} 
.test3 { 
    float: right; 
    width:50px; 
    height:100px; 
    background-color:black; 
}

http://jsfiddle.net/rjwg6w9h/1/

источник

2014-10-23 13:45:26

Встроенные блоки не выравнивая правильно

ответ

Смежные вопросы