如何使内联块元素垂直增长

Question

我有两个内嵌块元素（第一张图片）。第一个有固定的宽度。第二个没有固定宽度，因为容器可能会水平生长，因此它应该填充它。

当第二个元素文本很大（第二个图像）时，它会自动换行。

但我想要的是垂直生长的元素（第三张图片）。

我还需要文字以保留换行符。

Answer 1

您可以将max-width: calc( 100% - LABEL_WIDTH )应用于.element课程。将LABEL_WIDTH替换为标签的宽度。这样，您可以在em中为标签定义宽度，而不是使用两个百分比值。

请参阅此JSFiddle以获取一个工作示例：http://jsfiddle.net/QL78X/2/

有关支持calc（）的浏览器表，请参阅此链接：http://caniuse.com/calc

li {
    display: inline-block;
    vertical-align: top;
    list-style-type: none;
}

.label {
    width: 7em;
}

.element {
    width: calc( 100% - 7em );
    white-space: pre-line;
}

Answer 2

这是一个小提琴：http://jsfiddle.net/Pv8yH/1/

基本上，我在标签上设置了一个宽度，然后在元素上设置了最大宽度。我已经将白色空间设置为'nowrap'，这样第二个LI就不会被包裹下来。然后我必须确保在LI本身内将空格重置回“正常”。最大宽度仅用于展示，真的，魔术是白色空间属性（至少就你的问题而言）。

ul { white-space: nowrap; }
ul li {
    display: inline-block;
    white-space: normal;
}
li.label { width: 30%; vertical-align: top; background: red; }
li.element { max-width: 70%; background: green; }

NB。如果您为第一个元素设置ems的宽度，那么将它完全贴合可能会很棘手。它会像你想要的那样流动，但你肯定要调整它以使它看起来很好。

Answer 3

您可以使用

float:left;

在此处查看此示例： http://jsfiddle.net/3M5MF/

Answer 4

我建议你在正确的元素上使用max-width。我在这里做了一个例子：http://codepen.io/mattdrose/pen/qCLzG?editors=110

.field__item {
  display: inline-block;
  vertical-align: text-top;
}

.field__item--1 {
  width: 30%;
}
.field__item--2 {
  max-width: 70%;
}

我使用百分比，但您可以使用首选方法替换它们。

但是，我认为您应该使用floats，这样您在计算宽度时就不必处理html空格。

Answer 5

我使用了固定高度http://jsfiddle.net/6qMvy/

的容器的相对位置

.container{
    width: 400px;
    height: 600px;
    position: relative;
}
.left{
    width: 100px;    
    position: absolute;
}
.right{    
    position: absolute;
    left: 120px;
}