我想创建这个布局:

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

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

使用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没有成功.
在iOS Safari中,当我们有一个固定的标题和可滚动的内容时,当我们滚动时,输入被标题正确隐藏但闪烁的光标仍然在它上面.
转载于iOS 9.2.1和9.3 beta
这是代码,在iOS safari中测试[ http://jsbin.com/hoxuxu/edit?html,css,js,output]