0

私が達成しようとしていること

写真は私が達成しようとしているものです。基本的に、私は 1 つのラッパー div を作成し、その中に可変数の div を配置できるようにしようとしています。これは、親ラッパーの左端の左マージンに基づいています。

次のようなことが言えるようになりたいです。

.div1 { margin-left:5%; }
.div2 { margin-left:30%; }
.div3 { margin-left:85%; }

そして、写真に見られるものを達成してください。しかし、私は（私はそれが起こると思っていた）divが協力したがらないことに気付きました。を追加するfloat:leftと、それらは互いにマージンを追加するように見えます (div2 はmargin-left:30%5% の左マージンと 10% の幅に加えて を取得し、div2 をラッパーの一番左の部分から 45% に表示します。

以前のマージンを考慮に入れ、div2 のマージン左を 30%-15%=15% にして正しい結果を得ることができることはわかっていますが、それを行うためのアプローチがあるかどうか知りたいです。左マージンとは？

4

2 に答える 2

0

絶対位置を使用せずにフローティングでこのように試すことができます。

HTML

<div id="page">
<div id="box1">10%</div>
<div id="box2">25%</div>
<div id="box3">15%</div>

CSS

#page{width:100%;height:200px; background-color:#000;}
#box1{height:200px; background-color:red; width:10%; margin-left:5%;float:left;}
#box2{height:200px; background-color:green; width:25%; margin-left:15%;float:left;}
#box3{height:200px; background-color:blue; width:15%; margin-left:30%;float:left;}

デモ: http://jsfiddle.net/pDxXB/

于 2013-04-12T08:53:08.723 に答える