html – 使用修复空间(可变宽度)对齐元素

前端之家收集整理的这篇文章主要介绍了html – 使用修复空间(可变宽度)对齐元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个容器,里面有可变数量的元素.
这些元素应该是合理的,但固定空间在(例如20px)之间.
这意味着每个元素的宽度必须适应.

例如:

HTML

<div class="container">
    <div>
        <img src="...">
    </div>
    <div>
        <img src="...">
    </div>
    <div>
        <img src="...">
    </div>
</div>

CSS

div.container {
    text-align: justify;
}

div.container div {
    display: inline-block;
    margin-right: 20px;
}

div.container div img {
    width: 100%;
}

最后看起来应该是这样的(这张图片显示了两个例子:2个元素和3个元素;宽度是动态的,但空间修复[20px]):

它应该使用不同数量的子元素.

用CSS做专业的方法吗?

编辑:我应该提到这个修复空间是%值!

解决方法

如果使用 Flexbox是一个选项,您可以将flex:1添加到弹性项目以及具有固定值的margin属性,如下所示:

EXAMPLE HERE

div.container { display: flex; }

div.container div {
  height: 50px; /* Just for demo */
  flex: 1;
  margin-left: 20px;
}

div.container :first-child { margin-left: 0; }

实际上,flex:1在这种情况下是flex-grow: 1;的简写.

猜你在找的HTML相关文章