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

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

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

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

---

获取两个框的高度并进行比较。对于较短的一个，根据需要经常附加额外的内容（如果您想要多个项目，甚至可以做一些数学计算（例如，a列下有多少个项目x，使其与b列大小大致相同）。这有意义吗

这应该让你开始：

var greenheight=$（'#greenone'）.outerHeight（）， redheight=$（“#重做”）.outerHeight（）， 差值=数学绝对值（绿高-红高）， fillerheight=$（“#somehiddenfiller”）.outerHeight（）， howmanyfillers=数学地板（差值/填充高度）

然后使用.append（）迭代并转储到较短的文件中或之后，如何：

加成

---

（css修改改编自@FelipAls对我的原始小提琴的更改）

你可以尝试使用float、padding、margin和overflow来处理floting元素

这里有一把小提琴：在哪里

• 所有评论都从左边开始
• 如果有一个（长的）右框，则在宽度上受约束
• 左或右可以比另一个长

---

我修改了@Danield代码，但在注释上使用了

clear:left

，并且可能会根据需要在较高的右框旁边添加尽可能多的简短注释（上一条规则已删除）.

到目前为止，您是否尝试过任何方法？如果是，您尝试过什么方法来实现此功能？从外观上看，您所需要做的就是将红色框向右浮动，以实现该布局。浮动红色框只会更改因其“显示内联”而可以调整的内容属性。就我所知，显示块属性（如框、注释框或文本框）的工作方式不尽相同。我过去也尝试过类似的方法，但从未提出过令人满意且优雅的解决方案。确实可以这样做。我实际上只需在左列追加内容。你知道在CSS中执行此操作的方法吗？问题是使用js附加到特定列是因为高度分布不均匀。因此，即使我将其四舍五入，灰色框之间的高度距离也会不一致。也许你可以再添加一个框，并在灰色框的容器中添加一个溢出：auto；。这样，内容会一直向下。最后一条规则假设已知最高的框（上面有.high类），并且右高框后面正好有一条注释（相邻的选择器）的宽度应该减小。右框可能比左框高很多（我们不知道它是否更高）@FelipeAls，没错……但现在轮到我借用你的小提琴并做一些调整了……（我添加了float:left on the left div，现在看起来就像想要的OP；）谢谢，您的代码与FlipeAIs的代码之间的唯一区别在于。left有一个float:left规则。这有什么影响？FlipeAIs的代码似乎也可以使用float:left.sallt；）-当左边的框较高时，注释应该从左边开始；在您的代码笔中，它们没有：），您使用了哪个浏览器？（刚刚添加了一个我拥有的屏幕）。。。。。。。。。。。。。。。。。没关系，我不得不读两遍：）谢谢你的贡献。正如我对Danield代码的评论。唯一的区别是.left规则中的float:left。你认为会有什么影响？

<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>

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

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