Как сделать div совпадающим с правой стороной родителя при сохранении его вертикального положения?
Пожалуйста, обратитесь к этой удобной диаграмме, которую я рисовал:
![введите описание изображения здесь]()
Высота
div1
неизвестна. div3
ширина - текучая; он никогда не должен перекрывать div2
. Оба div1
и div2
имеют одинаковую ширину и горизонтально центрируются с помощью margin: auto
. Как я могу позиционировать div3
так, чтобы он выравнивался с правой стороной body
(независимо от ширины body
) при совместном использовании вертикальной позиции с div2
? (Использование CSS)
Ответы
Ответ 1
HTML
<div class="div1">div1</div>
<div class="div3">div3</div>
<div class="div2">div2</div>
CSS
.div1{
margin:0 auto;
width:100px;
height:50px;
border:5px solid #995555;
}
.div2{
width:100px;
margin:0 auto;
border:5px solid #aaaa55;
height:200px;
}
.div3{
float:right;
width:50px;
height:100px;
border:5px solid cyan;
}
Демо на http://jsfiddle.net/XjC9z/1/
Ответ 2
Как это?
HTML:
<div id='container'>
<div id='first'>1</div>
<div id='second'>2</div>
<div id='third'>3</div>
</div>
CSS
#container{
width: 100px;
margin:0 auto;
}
#first{
border: 1px solid #ff55ff;
}
#second{
border: 1px solid #55ff77;
}
#third{
border: 1px solid #448855;
}
#first,
#second{
width: 50px;
clear:both;
float:left;
}
#third{
clear:none;
float: left;
}
Смотрите эту скрипку:
http://jsfiddle.net/zaNvR/1/
Ответ 3
Простая сетка div сделает трюк:
http://jsfiddle.net/NUGPv/
<div class="con">
<div class="lft">div 1</div>
<div class="rgt"></div>
</div>
<div>
<div class="lft">div 2</div>
<div class="rgt">div 3</div>
</div>
.con { overflow:hidden; }
.lft { width:100px; height:100px; float:left; }
.rgt { width:100px; height:100px; float:left; }
Просто оставьте верхнюю правую ячейку пустой.