3

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

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

FelipeAI 和 Danield 的代码都是正确的。我选择了 FelipeAI 的代码，因为他的代码少了一条规则，但实现了同样的目标。

第一类情况 类型 2 情况

4

4 回答 4

2

这个怎么样：

小提琴

标记

<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 修改）

于 2013-07-16T21:51:12.490 回答
0

获取两个盒子的高度并比较它们。对于较短的内容，根据需要随时附加附加内容（如果您想要多个项目，甚至可以做一些数学运算（例如，有多少项目 x 将适合列 a 以使其与列 b 的大小大致相同）。有道理？

这应该让你开始：

var greenheight = $('#greenone').outerHeight()，redheight = $('#redone').outerHeight()，差异 = Math.abs(greenheight - redheight)，fillheight = $('#somehiddenfiller')。 outerHeight(), howmanyfillers = Math.floor(difference/fillerheight);

然后使用 .append() 迭代并转储到较短的或之后

于 2013-07-16T21:31:52.047 回答
0

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

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;
}
于 2013-07-16T22:05:30.793 回答
0

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

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

我修改了@Danield 代码，但添加clear: left了注释，并且根据需要在较高的右侧框旁边可能有尽可能多的简短注释（最后一条规则已删除）。

于 2013-07-16T22:27:36.120 回答