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>

我注意到我左侧没有主div，右栏/侧没有主div。

Answer 1

两个br标签会形成100％宽度的块，并防止浮动水平堆叠。

您可以首先制作列，然后将新闻块放在http://jsfiddle.net/yHWmv/

中，以避免此问题

不要忘记使用overflow：hidden或其他clearfix来清除带有包装的浮动。

HTML：

<div class="news">
  <div class="news-world">
    <div></div>
    ...
  </div>
  <div class="news-local">
    <div></div>
    ...
  </div>
</div>

的CSS：

.news {
  overflow:hidden;
}
.news-world {
  float:left;
  width:30%;
}
.news-local {
  float:right;
  width:30%;
}
.news-world div,
.news-local div {
  border:1px solid red;
  padding:10px;
}

Answer 2

首先，您可以将所有样式移动到CSS文件中。

你想要的是拥有最顶层的div，宽度为X，位置为：absolute。

然后对于孩子离开div，你有位置：亲属和右：50％;左：0 然后对于孩子权利div，你有位置：亲属和右：0;左; 50％;

Answer 3

将所有左侧div包裹在<div class="left">中。在<div class="right">中包装所有正确的div。

Ant然后：

Answer 4

您还可以为每个div添加`display：inline'（最好使用css文件）：

式：

.mainbox {
     width: 1000px;
}
.mainbox div {
     width:400px;
     display: inline;
}
.leftbox {
     float: left;
     border:1px solid red;
}
.rightbox {
     float: right;
     border:1px solid blue;
}
.clearbox {
     clear: both;
     height: 0;
     border: 0;
}

HTML：

<div class="mainbox">
     <div class="leftbox">news from world</div>
     <div class="rightbox">news from my country</div>
     <div class="clearbox"> </div>
     <div class="leftbox">news from world</div>
     <div class="rightbox">news from my country</div>
     <div class="clearbox"> </div>
     ...
</div>

没有主div的左侧和右侧的div

4 个答案: