两列布局中列的自动宽度

Question

我有以下标记，不应更改。

<div class="item">
   <div class="name">name</div>
   <div class="label">label</div>
   <div class="value">value value value</div>
</div>

我的问题是如何获得双列布局，其中第一列包含名称和标签，第二列包含值。 重要的是第一列有一个自动宽度，所以它会填满剩余的 space。第二列的宽度永远不能超过内容或最大宽度。

有了下面的CSS基本布局就搞定了

.item {
  background : red;
  display: flex;
  flex-flow: column wrap;
  height: 9em;
  justify-content: center;
  text-align: center;
  width: 16em;
}
.name, .label {
  align-items: center;
  display: flex;
  height: 50%;
  justify-content: center;
  width: 65%;
}
.value {
  overflow: auto;
  max-width: 35%;
  word-break: break-all;
}

但是如何实现自动宽度问题呢？

另请参阅我的更新 https://jsfiddle.net/qrrrv0jj/5/。

Answer 1

首先，我将 .value 添加到列表中，其中包含 .name 和 .label 的所有 CSS。然后我将 .value 的 heigth 和 width 更改为 100% 并且它起作用了。

值div不会随着里面内容的增加而变大，而且一切都很好并且居中。

PS: 将 overflow: hidden 添加到 .value 将防止内容超出 div.

Update for your JSFiddle

Answer 2

您可以使用 display property 以两种方式完成。对于旧浏览器 display: table; 和新浏览器 display: flex;。下面是新旧浏览器的例子。

对于旧浏览器：

<div class="item2">
    <div class="name">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    <div class="labels">label</div>
    <div class="value">value value value</div>

.item2 {
  background-color: #cccccc;
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  width: 500px;
}

.item2 div {
  display: table-cell;
  padding: 10px;
  vertical-align: top;
}

.item2 div.name {
  background-color: #ff0;
  color: #000;
}

.item2 div.labels {
  background-color: #ff00ff;
}

.item2 div.value {
  background-color: #ff0000;
}

对于新浏览器：

<div class="item">
    <div class="name">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    <div class="labels">label</div>
    <div class="value">value value value</div>
</div>

.item {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -moz-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  background-color: #000;
  color: #ffffff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 500px;
  -moz-box-flex: 0;
  -ms-flex: 0 0 500px;
  flex: 0 0 500px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  padding: 5px;
  width: 500px;
}

.item div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 10px;
}

.item div.name {
  background-color: #ff0;
  color: #000;
}

.item div.labels {
  background-color: #ff00ff;
}

.item div.value {
  background-color: #ff0000;
}

*{
  box-sizing: border-box;
}
*:after,
*:before{
  box-sizing: border-box;
}
.item {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -moz-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  background-color: #000;
  color: #ffffff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 500px;
  -moz-box-flex: 0;
  -ms-flex: 0 0 500px;
  flex: 0 0 500px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  padding: 5px;
  width: 500px;
}

.item div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 10px;
}

.item div.name {
  background-color: #ff0;
  color: #000;
}

.item div.labels {
  background-color: #ff00ff;
  flex: 0 0 100px;
  max-width: 100px;
}

.item div.value {
  background-color: #ff0000;
  flex: 0 0 100px;
  max-width: 100px;
}

.item2 {
  background-color: #cccccc;
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  width: 500px;
}

.item2 div {
  display: table-cell;
  padding: 10px;
  vertical-align: top;
}

.item2 div.name {
  background-color: #ff0;
  color: #000;
}

.item2 div.labels {
  background-color: #ff00ff;
  font-size: 24px;
  width: 100px;
}

.item2 div.value {
  background-color: #ff0000;
  width: 100px;
}

<div class="item">
    <div class="name">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    <div class="labels"><h1>For New browser</h1></div>
    <div class="value">value value value</div>
</div>
<div class="item2">
    <div class="name">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    <div class="labels"><h1>For Old browser</h1></div>
    <div class="value">value value value</div>
</div>

注意：如果您使用 flexbox，那么您将不会在最后两列 width 中发现任何问题。 display: table-cell; 将取宽度，直到一个单词不完整。

已编辑

我看到了你的Fiddle。我明白你到底想要什么。 flexbox 对这个问题没有帮助。您需要更改 html 结构。你可以试试这个。

HTML

<div class="item">
    <div class="child-item1">
        <div class="name">Lorem Ipsum is simply</div>
        <div class="value">value value value</div>
    </div>
    <div class="child-item2">
        label
    </div>
</div>

CSS

.item {
  background-color: #ff00ff;
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  width: 500px;
}

.item .child-item1,
.item .child-item2 {
  display: table-cell;
  vertical-align: middle;
}

.item .child-item1 {
  width: -webkit-calc(100% - 200px);
  width: -moz-calc(100% - 200px);
  width: calc(100% - 200px);
}

.item .child-item1 .name,
.item .child-item1 .value {
  border: 2px solid #eaeaea;
  display: block;
  min-height: 100px;
  max-width: 100%;
  width: 100%;
}

.item .child-item1 .name {
  background-color: #ff0685;
}

.item .child-item1 .value {
  background-color: yellowgreen;
}
.item .child-item2 {
  border: 2px solid #eaeaea;
  width: 200px;
  vertical-align: middle;
  text-align: center;
}

*{
  box-sizing: border-box;
}
.item {
  background-color: #ff00ff;
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  width: 500px;
}

.item .child-item1,
.item .child-item2 {
  display: table-cell;
  vertical-align: middle;
}

.item .child-item1 {
  width: -webkit-calc(100% - 200px);
  width: -moz-calc(100% - 200px);
  width: calc(100% - 200px);
}

.item .child-item1 .name,
.item .child-item1 .value {
  border: 2px solid #eaeaea;
  display: block;
  min-height: 100px;
  max-width: 100%;
  width: 100%;
}

.item .child-item1 .name {
  background-color: #ff0685;
}

.item .child-item1 .value {
  background-color: yellowgreen;
}
.item .child-item2 {
  border: 2px solid #eaeaea;
  width: 200px;
  vertical-align: middle;
  text-align: center;
}

<div class="item">
    <div class="child-item1">
        <div class="name">Lorem Ipsum is simply</div>
        <div class="value">value value value</div>
    </div>
    <div class="child-item2">
        label
    </div>
</div>

Answer 3

使用浮动代替 flexbox 模型可能是一个合适的解决方案。它使标记几乎符合需要，只是重新定位值元素。

<div class="item">
   <div class="value">value value value</div>
   <div class="name">name</div>
   <div class="label">label</div>
</div>

.item {
  background: red;
  height: 9em;
  width: 16em;
}
.name, .label {
  align-items: center;
  display: flex;
  height: 50%;
  justify-content: center;
  overflow: hidden;
}
.value {
  align-items: center;
  background: aquamarine;
  display: flex;
  float: right;
  height: 100%;
  max-width: 35%;
}

参见 https://jsfiddle.net/qrrrv0jj/6/ 中的示例。

两列布局中列的自动宽度

Automatic width of a column in a two column layout

html

css

multiple-columns