web-dev-qa-db-ja.com

垂直位置を維持しながら、divを親の右側に揃える方法は？

私が描いたこの便利な図を参照してください。

enter image description here

div1の高さは不明です。 div3の幅は流動的です。 div2と重複することはありません。 div1とdiv2は両方とも同じ幅で、margin: autoを介して水平方向に中央揃えされます。 div3と垂直位置を共有しながらbodyの右側（bodyの幅に関係なく）に整列するようにdiv2を配置するにはどうすればよいですか？ （CSSを使用）

csspositioningvertical-alignment
24
sbichenko
.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;
}
<div class="div1">div1</div>
<div class="div3">div3</div>
<div class="div2">div2</div>

http://jsfiddle.net/XjC9z/1/ のデモも

23
Gabriele Petrioli

このような？

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/

4
Filipa Lacerda

単純な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; }

右上のセルを空のままにしてください。

1
Lowkase