Question

我想创建这个布局：

enter image description here

当一个项目不适合容器时，我们可以移动到下一行：

enter image description here

当容器比较宽的项目小时，我们可以将内容包装在多行

中

enter image description here

使用Javascript非常简单，这里是示例https://jsfiddle.net/oucxsep4/。

var choices = document.querySelectorAll('li');
var maxWidth = 0;
// read
for (i = 0; i < choices.length; ++i) {
    maxWidth = Math.max(maxWidth, choices[i].offsetWidth)
};

// write
for (i = 0; i < choices.length; ++i) {
    choices[i].style.width = maxWidth + "px";
};

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
li{
    background: red;
    float: left;
    margin: 5px;
}

<ul>
    <li>first choice</li>
    <li>choice</li>
    <li>This is the wider choice</li>
    <li>other choice</li>
</ul>

是否可以不使用Javascript，只使用CSS？我试过flexbox没有成功。

Answer 1

可以使用简单的css：

＆＃13;

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

＆＃13;

<!DOCTYPE html>

<div class="list-container">
  <div class="list">
    <div class="list-item">fresh figs</div>
    <div class="list-item">pine nuts</div>
    <div class="list-item">honey</div>
    <div class="list-item">balsamic vinegar</div>
  </div>
</div>
<div class="list-container">
  <div class="list">
    <div class="list-item">fresh figs</div>
    <div class="list-item">pine nuts</div>
    <div class="list-item">honey</div>
    <div class="list-item">balsamic vinegar</div>
  </div>
</div>

＆＃13;

Answer 2

单独的CSS无法将所有兄弟元素宽度与最宽的元素宽度匹配。但是，通过为列表项提供50％的宽度来创建两列结构（width: calc(50% - 10px /* subtracts margins */);），然后为它们提供最小宽度（min-width:153px; in这个例子）。

如果您无法在CSS中手动设置最小宽度，那么您可能需要使用一些javascript来补充CSS，以设置与您的示例类似的兄弟元素的最小宽度。

ul{
    margin: 0;
    padding: 5px;
    list-style: none;
    width:50%;
    background-color: #eee;
}

ul::after {
    clear: both;
    content: "";
    display: block;
}

li {
    background: red none repeat scroll 0 0;
    display: block;
    float: left;
    margin: 5px;
    min-width: 153px;
    width: calc(50% - 10px);
}

<ul>
    <li>first choice</li>
    <li>choice</li>
    <li>This is the wider choice</li>
    <li>other choice</li>
</ul>

Answer 3

我有一个丑陋的解决方案

https://jsfiddle.net/y5x3znqo/2/

body {
  background: #ccc
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  background: red;
  float: left;
  margin: 5px;
}

.label {
  position: absolute;
}

.hide {
  visibility: hidden;
}

<ul>
  <li>
    <span class="label">first choice</span>
    <span class="hide">This is the wider choice</span>
  </li>
  <li>
    <span class="label">choice</span>
    <span class="hide">This is the wider choice</span>
  </li>
  <li>
    <span>This is the wider choice</span>
  </li>
  <li>
    <span class="label">other choice</span>
    <span class="hide">This is the wider choice</span>
  </li>
</ul>

这个想法是将最广泛的项目放在每个选项中，具有可见性：隐藏。这需要预先计算最宽的项目，例如在后端。

每个项目的宽度与最宽的元素相同

3 个答案: