相关疑难解决方法(0)

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

我想创建这个布局:

在此输入图像描述

当项目不适合容器时,我们可以移动到下一行:

在此输入图像描述

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

在此输入图像描述

使用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";
};
Run Code Online (Sandbox Code Playgroud)
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
li{
    background: red;
    float: left;
    margin: 5px;
}
Run Code Online (Sandbox Code Playgroud)
<ul>
    <li>first choice</li>
    <li>choice</li>
    <li>This is the wider choice</li>
    <li>other choice</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

是否可以不使用Javascript而只使用CSS?我试过flexbox没有成功.

css css3 flexbox

29
推荐指数
2
解决办法
1万
查看次数

最宽元素的宽度设置行中所有兄弟的宽度

我已经阅读了很多关于CSS弹性框和CSS网格的教程,但坦率地说,我只是无法弄清楚如何做这个简单的(?)事情.

我想要的只是容器中的元素都与最宽的元素一样宽.

我不希望它们填满容器的整个宽度,只是增长到最大宽度.可以用CSS完成吗?

考虑这个HTML:

<div class="container">
   <button>a normal button</button>
   <button>tiny</button>
   <button>a really, really, really wide button</button>
</div>
Run Code Online (Sandbox Code Playgroud)

这产生了这样的事情:

在此输入图像描述

我想要的是这样的东西,它们是那个最宽按钮的宽度:

在此输入图像描述

我不希望它们只是拉伸以填充页面的宽度:

在此输入图像描述

可以这样做吗?如果是这样,上述HTML的CSS是什么?

html css css3 flexbox css-grid

3
推荐指数
2
解决办法
664
查看次数

标签 统计

css ×2

css3 ×2

flexbox ×2

css-grid ×1

html ×1