gpt4 book ai didi

html - 创建以相同宽度向左浮动的 div 框的问题

转载 作者:太空宇宙 更新时间:2023-11-04 02:18:14 27 4
gpt4 key购买 nike

我正在尝试创建 4 个向左浮动的框,宽度为 25%,margin:0 10px 在侧面以提供间距,但最后一个 div 被向下推。

我尝试应用 box-sizing 但它没有做任何事情。

Plunker link

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

.box {
width: 25%;
background: #333;
float: left;
color: #fff;
margin: 0 10px;
padding: 10px;
}

最佳答案

根据我的评论:

尝试 width: calc(25% - 20px)box-sizing: border-box

.box {
width: calc(25% - 20px); /* takes care of margin */
background: #333;
float: left;
color: #fff;
margin: 0 10px;
box-sizing: border-box; /* takes care of padding */
padding: 10px;
}
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

如果你不能让计算器工作,你可以只删除边距并使用一个内框(通常我这样做是为了让它与旧浏览器兼容):

.box {
width: 25%;
box-sizing: border-box;
padding: 0 10px;
float: left;
}
.box .inner {
background: #333;
color: #fff;
padding: 10px;
}
<div class="box"><div class="inner">1</div></div>
<div class="box"><div class="inner">2</div></div>
<div class="box"><div class="inner">3</div></div>
<div class="box"><div class="inner">4</div></div>

关于html - 创建以相同宽度向左浮动的 div 框的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38569349/

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