Html 双栏布局中栏的自动宽度

我有以下标记，不应更改

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

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

---

请参见此处的更新。

首先，我将

.value

与

.name

和

.label

的所有CSS一起添加到列表中。然后我把

.value

的

高度

和

宽度

改为

100%

，效果很好

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

PS:将

溢出：隐藏添加到
中。value
将防止内容超出
div

您可以使用
显示属性以两种方式执行此操作。对于旧的浏览
显示：表格和对于新浏览器
显示：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>

对于新浏览器：

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


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。
用于新浏览器
价值
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。
对于旧浏览器
价值
使用float代替flexbox型号可能是一个合适的解决方案。它几乎按照需要保留标记，并且只重新定位value元素

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

请参见。
中的示例，很遗憾，这不是正确的解决方案。请注意，第一列应具有自动宽度。看。@Daniel哦，我明白了，我会努力弄清楚的。好吧，但65%不是我想要的。我需要第一列的自动宽度
column1.width=parentWidth-column2.width
。第二个colmun的宽度不能超过其内容或最大宽度。您的解决方案仅显示三个简单列。我需要的是一种划桨。请再次查看我的问题。这是基于您的
html
代码。您可以添加更多列<代码>宽度
将是
自动
和
高度
将是相同的
100%
。不幸的是，这仍然不是我需要的。我已经更新了我的示例。请参阅我创建的新解决方案。您可以试试这个。很遗憾，您的解决方案中没有保留标记。请看我的答案。也许你能帮我定位价值元素？非常感谢。
<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;
}

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