3

目前我正在使用负边距技术（例如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 选项可以在所有浏览器中实现与边框相同的高度？

4

2 回答 2

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%;     
}

希望这可以帮助。

于 2013-10-08T17:20:39.640 回答
0

在每列中添加伪元素怎么样？

.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每一列都添加了。

于 2014-10-10T11:36:38.050 回答