每个项目与最宽的元素具有相同的宽度 [英] Every item to have the same width as the widest element

查看：20
本文介绍了每个项目与最宽的元素具有相同的宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建这个布局:

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

当容器比宽项目小时，我们可以用多行包装内容

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

var selection = document.querySelectorAll('li');var maxWidth = 0;//读for (i = 0; i 

ul{边距:0；填充:0；列表样式:无；}李{背景:红色；向左飘浮;边距:5px；}

    <li>首选</li><li>选择</li><li>这是更广泛的选择</li><li>其他选择</li>

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

解决方案

使用简单的 css 是可能的:

.list-container {显示:inline-flex；弹性方向:行；对齐内容:居中；}.列表 {显示:弹性；弹性方向:列；}.项目清单 {文本转换:大写；背景颜色:rgb(200, 30, 40);字体大小:1.3em；文本对齐:左；填充:10px；边距:1px；显示:弹性；弹性方向:行；flex-wrap: 包裹;justify-content: flex-start;}

<div class="list-container"><div class="list"><div class="list-item">新鲜无花果</div><div class="list-item">松子</div><div class="list-item">亲爱的</div><div class="list-item">香醋</div>

<div class="list-container"><div class="list"><div class="list-item">新鲜无花果</div><div class="list-item">松子</div><div class="list-item">亲爱的</div><div class="list-item">香醋</div>

I want to create this layout:

When an item doesn't fit in the container, we can move to the next line:

When the container is tiny than the wider item, we can wrap the content in multilines

It's very easy with Javascript, here is the example 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>

Is it possible to do it without using Javascript, only CSS? I have tried with flexbox without success.

解决方案

It is possible using simple css:

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

<!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>

这篇关于每个项目与最宽的元素具有相同的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆