3列布局，中间列响应宽度答案

【问题标题】：3 column layout, with responsive width for the middle column3列布局，中间列响应宽度
【发布时间】：2015-10-15 10:38:08
【问题描述】：

所以这是我想要为列表中的一行实现的布局，

左栏有一个固定大小为 35px 的图标。

中间一栏会有文字。并且列的宽度应该根据屏幕大小增加/减少。

最后一列也有文字。此文本不应分成第二行。该列应采用其中内容的宽度。

所以据我了解，这是 HTML，

<div class="row">
<div class="col-1"></div>
<div class="col-2"></div>
<div class="col-3"></div>
</row>

和 CSS，

.row { width:100%; }

.col-1 { width:35px; }

.col-2 { width:80%; }

.col-3 { width:10%; }

这没有给我预期的结果。谁能告诉我它是怎么做的。

【问题讨论】：

第 3 列的宽度是固定的（px 或 %）还是需要根据内容增长？
@SalmanA 是的。 col-3 会根据内容而变化。它将更改为将所有内容放在一行中。 col-2 宽度应仅针对屏幕尺寸（宽度）而变化。含义 - col-2 内容可以分成另一行。

标签： html css layout

【解决方案1】：

你可以使用弹性盒子

        <style>
.parent {
    display:flex;
    width: 100%;
}
.item {
    border: 1px solid #000;
    height: 100px;
}
.a {
    width: 85px;
}
.b {
    flex: 1 auto;
}
    </style>
<div class="parent">
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item c">rgfdgfdgfdgfdgfdgfdgfdg</div>
</div>

https://jsfiddle.net/bkqgzghb/1/

【讨论】：

【解决方案2】：

Flexbox 可以解决大部分问题。

最后一列也有文字。此文本不应分成第二行。该列应采用其中内容的宽度。

为此，您需要在相关的 div 中添加：white-space:no-wrap。

请注意，这可能会导致屏幕尺寸较小时出现问题。

JSfiddle Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.row {
  display: flex;
  margin-bottom: 10px;
}
.col-1 {
  width: 35px;
  background: red;
}
.col-2 {
  flex: 1;
  background: blue;
}
.col-3 {
  background: green;
  white-space: nowrap;
}

<div class="row">
  <div class="col-1"></div>
  <div class="col-2"></div>
  <div class="col-3">
    <p>Lorem ipsum dolor sit amet!</p>
  </div>
</div>

<div class="row">
  <div class="col-1"></div>
  <div class="col-2"></div>
  <div class="col-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, similique!</p>
  </div>
</div>

【讨论】：