使用CSS允许框水平拉伸到给定的空间

Question

我一直在思考如何在CSS中执行此操作。请参阅下面的2张图片。想象一下2列布局，其中左列的高度可能比右列长也可能不长，反之亦然。现在在图片中这些是绿色和红色。我有一个评论框和一些框（复数），可能是需要水平拉伸到给定空间的div。因此，当右列较长时，框会从左侧开始变小。但是当左栏较长时，方框（仍然）从左侧开始，但显然占据了整个大小。

我想知道如何在CSS中的灰色框中实现这一点。我知道javascript可以做到，但css示例会有所帮助。

FelipeAI和Daneild的代码都是正确的。我之所以选择FelipeAI，是因为他的代码少了一条规则但却达到了同样的目的。

Answer 1

这个怎么样：

<强> FIDDLE

标记

<div class="wpr">
    <div class="left"></div>
    <div class="right high"></div>
    <div class="comment"></div>
    <div class="comment"></div>
    <div class="left high"></div>
    <div class="right"></div>
    <div class="comment"></div>
    <div class="comment"></div>
</div>

CSS

.wpr
{
   width: 250px; 
}
.left,
.right {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    display: inline-block;
}
.left {
    background: green;
    float:left;
}
.right {
    float: right;
    margin-left: 50px;
    background: brown;
}
.high {
    height: 150px;
}
.comment {
    clear: left;
    overflow: hidden;
    background: gray;
    height: 60px;
    margin-bottom: 10px;
}

（改编自@FelipAls的css修改改为我原来的小提琴）

Answer 2

获取两个框的高度并进行比较。对于较短的一个，可以根据需要追加附加内容（如果你想要多个项目，甚至可以做一些数学运算（例如，多少项x将适合列a，以便它与列b大小相同）。那有意义吗？

这应该让你开始：

var greenheight = $（'＃greenone'）。outerHeight（），     redheight = $（'＃redone'）。outerHeight（），     差异= Math.abs（greenheight - redheight），     fillerheight = $（'＃somehiddenfiller'）。outerHeight（），     howmanyfillers = Math.floor（差异/填充高度）;

然后使用.append（）

迭代并转储到较短的一个或之后

Answer 3

您可以尝试使用浮动，填充，边距和溢出来处理浮选元素。

http://codepen.io/anon/pen/xCvzq

    .box {
  width:445px;
  margin:auto;
  padding:15px 0 0;
  border:solid;
  overflow:hidden;
}
.box > div {
  margin:0 15px 15px ;
  border:1px solid;
}
.green, .red {width:200px;}
div.green {
  height:191px;
  background:green;
  float:left;
  clear:both;
  margin-right:0;
}
.box div.first {
  height:115px;
}
div.red {
  float:right; 
  height:191px;
  background:red;
  margin-left:11px;
}
div.comment {
  overflow:hidden;
  background:gray;
  min-width:100px;
  clear:left;
}

Answer 4

这是一个小提琴：http://jsfiddle.net/dsScA/2/其中

• 所有评论都从左边开始，
• 如果沿着它们有一个（长）右框，则会受到宽度的限制
• 左或右是否可以长于另一个

我在评论中使用了@Danield代码但clear: left，并且根据需要可以在更高的右侧框旁边添加尽可能多的简短评论（删除最后一条规则）。