-1

内側のdivに右の境界線を適用するには?

.outerDiv{width:100%;} 
.leftDiv{float:left;width:10%;}
.centerDiv{float:left;width:80%;}
.rightDiv{float:left;width:10%;}
.divContent{float:left}

 <div class="outerDiv"> 
     <div class="leftDiv">First</div> 
     <div class="centerDiv">
          <div class="divContent">inside1</div> 
          <div class="divContent">inside1</div> 
          <div class="divContent">inside1</div> 
     </div> 
     <div class="rightDiv">Third</div> 
 </div>

出力：

---------------------------
first|inside1      | third|
     |inside2      |      | 
     |inside3             |
---------------------------

コンテンツ (2 列目) の境界線が正しく配置されていません。

4

2 に答える 2

0

あなたの質問はよくわかりませんが、あなたのコードにはいくつかの欠陥があります。

まず、1、2、3 の内側を水平ではなく垂直に並べたいようです。このために を削除するだけfloatです。境界線について話しても、CSS にはそれらのいずれも表示されません。

このフィドルから始めます。これがあなたが探していることをしない場合は、質問を明確にしてください：

http://jsfiddle.net/zCpXM/1/

于 2012-09-04T08:18:22.540 に答える
0

さまざまなオプションがあります。

メインコンテンツの高さが常に最大であることがわかっている場合は、その上で border-left と border-right を宣言するだけです: http://jsfiddle.net/NSgxH/このようにして、境界線は常に下に移動します。

この仮定ができない場合は、表示テーブルを使用してこの問題を解決できます: http://jsfiddle.net/NSgxH/3/ただし、これは古い IE で問題を引き起こします。

固定の高さ、負のマージン トリックなど、同じ結果を達成するための手法は他にもいくつかありますが、上記が最もクリーンな解決策であると言えます。

于 2012-09-04T08:18:37.853 に答える