Question

目前我正在使用负边距技术（例如CSS - Equal Height Columns?）使我的水平div看起来具有相同的高度。这有点好用，但现在我必须为div添加边框，但由于填充和负边距的组合来拉伸背景，因此没有底边框。

这是我用我的代码设置的小提琴：http://jsfiddle.net/BvVKH/3/

HTML：

<div class="justified-divs">
    <div>
        <p>column</p>
    </div>
    <div>
        <p>column</p>
        <p>column</p>
    </div>
    <div>
        <p>column</p>
        <p>column</p>
        <p>column</p>
    </div>
</div>

相关CSS：

.justified-divs {
    overflow: hidden; /* cut off the stretched background */
}

.justified-divs div {
    padding: 0 10px 9999px 10px; 
    margin-bottom: -9999px;
    *margin-bottom: -9999px;
}

我已经看过许多不同的解决方案，而我最初使用这个解决方案的原因是因为它支持旧IE。是否有更多纯CSS选项可以在所有浏览器中实现与边界相同的高度？

Answer 1

我能够成功获得您想要的结果。我首先看到的解决方案是http://offshootinc.com/blog/2011/11/23/getting-100-column-height-with-css/。唯一的问题是您需要知道哪个列是最具内容的列才能使其工作。如果经常更改（即：动态内容），您可能需要求助于Javascript解决方案。我已经发布了以下代码，但你也可以在这里查看jsFiddle：http://jsfiddle.net/mesPb/

<!-- HTML -->
<div class="justified-divs">
    <div class="one">
       <p>column</p>
    </div>
    <div class="two">
        <p>column</p>
        <p>column</p>
    </div>
    <div class="longest">
        <p>column</p>
        <p>column</p>
        <p>column</p>
    </div>
</div>

/* CSS, BABY */
div.justified-divs{
    background: #090;
    position: relative;
}

div.justified-divs div{
    width: 30%;
    background: #fff;
    top:0;
    bottom:0;
    border: 1px solid red;
}

.one{
   left:0;
   position: absolute;
}

.longest{
    margin-left: 70%;    
}

.two{
    position: absolute;
    left: 35%;     
}

希望这有帮助。

Answer 2

如何在每列中添加伪元素？

.justified-divs div:after {
      content: '';
      display: block;
      width: 30%;
      height: 0;
      border-bottom: 2px solid red;
      position: absolute;
      bottom: 0;
      padding: 0 10px;
      margin-left: -10px;
}

.justified-divs {
  font-size: 0;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  overflow: hidden;
  /*temp debug colors */
  background-color: green;
  position: relative;
}
.justified-divs:after {
  /* stretch divs to give them equal horizontal spacing */
  content: '';
  width: 100%;
  display: inline-block;
}
.justified-divs div {
  background-color: white;
  font-size: 14px;
  vertical-align: top;
  display: inline-block;
  text-align: left;
  *display: inline;
  /* <= IE7 hacks */
  zoom: 1;
  /* <= IE7 hacks */
  /* use large padding and equal size negative margin to keep column heights the same size as whichever is tallest */
  padding: 0 10px 9999px 10px;
  margin-bottom: -9999px;
  *margin-bottom: -9999px;
  /*temp debug colors */
  width: 30%;
  border: 2px solid red;
}
.justified-divs div:after {
  content: '';
  display: block;
  width: 30%;
  height: 0;
  border-bottom: 2px solid red;
  position: absolute;
  bottom: 0;
  padding: 0 10px;
  margin-left: -10px;
}

<div class="justified-divs">
  <div>
    <p>column</p>
  </div>
  <div>
    <p>column</p>
    <p>column</p>
  </div>
  <div>
    <p>column</p>
    <p>column</p>
    <p>column</p>
  </div>
</div>

我在position: relative;和.justified-divs内为每列添加了:after。

CSS等于高度div与边框

2 个答案: