两列布局中列的自动宽度答案

【问题标题】：Automatic width of a column in a two column layout两列布局中列的自动宽度
【发布时间】：2017-06-12 21:16:49
【问题描述】：

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

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

我的问题是如何获得两列布局，其中第一列由名称和标签组成，第二列由值组成。 重要的是第一列具有自动宽度，以便填充剩余的空间。第二列的宽度不得超过内容或最大宽度。

使用下面的 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/。

【问题讨论】：

标签： html css multiple-columns

【解决方案1】：

使用 float 而不是 flexbox 模型可能是一个合适的解决方案。它几乎可以根据需要保持标记，并且只需重新定位 value 元素。

<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/ 的示例。

【讨论】：

【解决方案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; 将占用宽度直到一个单词不完整。

已编辑

我看到了你的小提琴。我明白你实际上想要什么。 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>

【讨论】：

您的解决方案仅显示三个简单的列。我需要的是一种行跨度。请再次查看我的问题。
这是基于您的html 代码。您可以添加更多列。 width 将是 auto 和 height 将是相同的 100%。
不幸的是，这仍然不是我需要的。我已经更新了我的示例。请看jsfiddle.net/qrrrv0jj/5
我创建了新的解决方案。你可以试试这个。
很遗憾，您的解决方案中没有保留该标记。请看我的回答。也许你可以帮我定位价值元素？谢谢！

【解决方案3】：

首先，我将.value 添加到列表中，其中包含.name 和.label 的所有CSS。然后我把.value的heigth和width改成了100%，就成功了。

当里面有更多内容时，div 的值不会变大，而且一切都很好并且居中。

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

Update for your JSFiddle

【讨论】：

不幸的是不是正确的解决方案。请注意，第一列应具有自动宽度。见jsfiddle.net/qrrrv0jj/2。
@Daniel 哦，我明白了，我会想办法解决的。
好的，但是 65% 不是我想要的。我需要第一列的自动宽度。 column1.width = parentWidth - column2.width。并且第二个 colmun 不得宽于其内容或最大宽度。