Question

如何为内部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             |
---------------------------

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

Answer 1

我真的不明白你的问题，但我发现你的代码存在一些缺陷。

首先，看来你想要1,2和1之内。 3垂直排列，而不是水平排列。只需删除float即可。即使您谈论边框，也不要在CSS中显示任何边框。

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

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

Answer 2

您有不同的选择：

当你知道你的主要内容总是最大的高度时，只需在其上声明border-left和border-right：http://jsfiddle.net/NSgxH/这样边框将始终位于底部。

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

还有其他一些技术可以达到相同的效果，包括固定高度，负边距技巧等，但我会说上面是最干净的解决方案。

内部div的CSS边框

2 个答案: