-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             |
---------------------------

内容（第二列）边框未正确对齐。

4

2 回答 2

0

我不太明白你的问题，但我发现你的代码有一些缺陷。

首先，您似乎希望在 1,2 和 3 内垂直排列，而不是水平排列。只需float为此删除。即使您谈论边框，也不会在 CSS 中显示任何边框。

从这个小提琴开始。如果这不能满足您的要求，请澄清您的问题：

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

于 2012-09-04T08:18:22.540 回答
0

你有不同的选择：

当您知道您的 maincontent 始终具有最大高度时，只需在其上声明border-left 和border-right：http: //jsfiddle.net/NSgxH/这样边框将始终位于底部。

如果你不能做出这个假设，你可以使用显示表来解决这个问题：http: //jsfiddle.net/NSgxH/3/但是这会导致旧版 IE 出现问题。

还有其他几种技术可以实现相同的结果，包括固定高度、负边距技巧等，但我想说以上是最干净的解决方案。

于 2012-09-04T08:18:37.853 回答