1

いくつかの div をこの構造に合わせようとしていますが、何も機能していません。

<div>
     <div>top</div>
     <div>middle
          <div>left</div> <div>right</div>
     </div>
     <div>bottom</div>
</div>

絶対値、ブロックなどでフロートを使用してみましたが、最も近いのはブロックインラインですが、右揃えが必要な div が左 div の近くに位置し、テキストを右揃えに追加しても喜びはありませんでした。

どうもありがとうD

4

3 に答える 3

1

これを試して

<div>
    <div>top</div>
    <div>
        <div style="float:left;">left</div>
        <div style="float:left;">right</div>
    </div>
    <div style="clear:both;">bottom</div>
</div>

clear：bothを使用した下部のdivはおそらく十分ではありませんが、この特定の例ではトリックを実行します

このためのグーグルクリアフィックス

于 2012-07-04T16:42:10.930 に答える
0

leftとrightdivを与えて、widthそれらをさせますfloat

以下にdivを追加して、フロートもクリアしてください。clear: both;

コード：

<div id="wrap">
     <div id="top">top</div>
     <div id="mid">
         <div id="left">left</div>
         <div id="right">right</div>
         <div class="clear"></div>
     </div>
     <div id="bot">bottom</div>
</div>​

CSS：

div {
    background: #ccc;
    height: 15px;
    margin-bottom: 10px;
}

.clear {
    clear: both;
}

#wrap {
    width: 400px;
}

#top {

}

#mid {

}

#left {
    float: left;
    width: 200px;
}

#right {
    float: left;
    width: 200px;
}

#bot {

}
​

動作中のコードを参照してください：http：//jsfiddle.net/GZg6y/

于 2012-07-04T16:41:54.700 に答える
0

これはさまざまな方法で行うことができます。1 つは float css プロパティを使用する方法です。次の例のように幅を指定してください。

<div class="container">
<div class="top">top</div>
<div class="middle">
   <div class="left">left</div> <div class="right">right</div>
</div>
<div  class="bottom">bottom</div>

css は次のようになります。

.left{
float:left;
width:50%;
background:green;
}
.right{
float:right;
width:50%;
background:blue;
}
.bottom{
clear:both;
}​

ここを参照してくださいhttp://jsfiddle.net/M3met/1/

于 2012-07-04T16:55:35.000 に答える