Question

有点模糊。我使用新闻系统，在左侧我想从世界获得新闻，在右边我不会从我的国家获得新闻。我真的不知道如何解决这个问题：http：//i48.tinypic.com/15rxzkw.jpg

源：

<div style="width:1000px;">
    <div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>

 <div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>

  <div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>

   <div style="border:1px solid red;float:left;width:400px;">news from world</div><br/> <br/>

   <div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>


    <div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
    <div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
    <div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
    <div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
</div>

Answer 1

你需要一个清除你的浮动div。把这个：

<div style="clear: both;"></div>

http://www.quirksmode.org/css/clearing.html

例如：

<div style="width:1000px;">
<div style="border:1px solid red;float:left;width:400px;">aaaaaaaa</div>
<div style="border:1px solid blue;width:400px;float:right;">bbbbbbb</div>
<div style="clear: both"></div>
<div style="border:1px solid blue;width:400px;float:left;top:0px;">cccccccc</div>
<div style="border:1px solid blue;width:400px;float:right;">dddddddddd</div>
</div>

Answer 2

因为<br /><br />

删除它们，因为它们会将元素2,3和4 2规则推下来。

还尝试将样式与html分开，并且永远不要使用<br />进行样式设置。（W3C语义）

Answer 3

你可以试试这个：

    <div style="width:1000px;">

   <div style="float:left;">
    <div style="border:1px solid red;width:400px;">aaaaaaaa</div><br/><br/>
    <div style="border:1px solid blue;width:400px;">bbbbbbb</div>
    </div>
     <div style="float:left;">
    <div style="border:1px solid blue;width:400px;top:0px;">cccccccc</div>
    <div style="border:1px solid blue;width:400px;">dddddddddd</div>
    </div>

    </div>

div左右两侧

3 个答案: