0

我想制作新闻系统，在左边我想从世界上获取新闻，在右边我不会从我的国家获取新闻。我真的不知道如何解决这个问题：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。

4

4 回答 4

1

两个 br 标签构成了类似 100% 宽度的块，并防止浮动水平堆叠。

您可以通过先制作列然后将新闻块放入http://jsfiddle.net/yHWmv/来避免此问题

不要忘记使用带有溢出的包装器清除浮动：隐藏或其他清除修复。

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;
}
于 2013-01-10T13:09:48.860 回答
0

您还可以在每个 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>
于 2013-01-10T13:04:01.573 回答
0

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

你想要的是拥有最上面的div，宽度说X，位置：绝对。

然后对于孩子的左 div，你有 position:relative 和 right:50%;left:0 然后对于孩子的右 div，你有 position:relative 和 right:0;left;50%;

于 2013-01-10T12:52:18.507 回答
0

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

蚂蚁然后：

于 2013-01-10T12:54:31.297 回答