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

2 つの 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;
}
于 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

左のすべてのdivをでラップし<div class="left">ます。すべての正しいdivをでラップします<div class="right">。

その後、Ant：

于 2013-01-10T12:54:31.297 に答える
0

まず、すべてのスタイルを CSS ファイルに移動できます。

あなたが望むのは、幅がXで位置が絶対的な最上位のdivを持つことです。

次に、子の左 div には position:relative と right:50%;left:0 があり、子の右 div には position:relative と right:0;left;50%; があります。

于 2013-01-10T12:52:18.507 に答える