gpt4 book ai didi

html - 如何在没有计算的情况下实现这种等距布局?

转载 作者:行者123 更新时间:2023-11-28 09:08:20 25 4
gpt4 key购买 nike

是否有一种“纯粹”的方式来实现这种具有固定内容和相等流动间距的布局,即不使用 calc 的方式?

Fiddle

HTML:

<body>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</body>

CSS:

body {
min-width: 300px;
}

.content {
width: 100px;
height: 100px;
background: blue;
float: left;
margin-left: calc((100% - 300px) / 4);
}

最佳答案

不幸的是没有。您可以使用一种方法“几乎”通过为每个 .content 使用包装器 div 并将包装器设置为主体宽度的三分之一来实现它。在每个 wrapper 中,您将蓝色框居中。这样做的缺点是蓝色框之间的距离是外部蓝色框到主体边框的距离的两倍。

* {
margin: 0;
padding: 0;
border: 0;
}
body {
min-width: 300px;
width: 100%;
}
.content-wrapper {
width: 33.3333%;
text-align: center;
float: left;
}
.content {
width: 100px;
height: 100px;
background: blue;
margin: 0 auto;
}
<body>
<div class="content-wrapper"><div class="content"></div></div>
<div class="content-wrapper"><div class="content"></div></div>
<div class="content-wrapper"><div class="content"></div></div>
</body>

关于html - 如何在没有计算的情况下实现这种等距布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26599961/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com