仅使用display inline和inline-block对齐div
仅使用display inline和inline-block对齐div
提问于 2020-10-02 22:09:51
.box {
background: maroon;
width: 200px;
height: 150px;
}
.box-1 {
border: 5px solid black;
}
.box-2 {
display: inline-block;
border: 5px double black;
}
.box-3 {
display: inline-block;
border: 5px dashed black;
}
.box-4 {
display: inline-block;
border: 5px dotted black;
}
.box-5 {
display: inline-block;
border: none;
} <body>
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
</body>
我在对齐第三和第四个div时遇到了麻烦。根据上面的代码，我得到了this。但是，我还没有设置第三和第四个div的样式(这就是我在这里询问的)，所需的样式是this。我告诉你不要使用flexbox或grid，只使用盒子模型的基本显示属性，比如inline和inline-block。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-10-02 22:26:26
您可以对行使用另一个DIV，并使您的框都"display: inline-block;“
.box-row {
display: block;
border: 1px solid #00FF00;
}
.box {
display: inline-block;
background: maroon;
width: 200px;
height: 150px;
}
.box-1 {
display: inline-block;
border: 5px solid black;
}
.box-2 {
display: inline-block;
border: 5px double black;
margin-right: 20px;
}
.box-3 {
display: inline-block;
border: 5px dashed black;
margin-left: 20px;
}
.box-4 {
display: inline-block;
border: 5px dotted black;
margin-right: 20px;
}
.box-5 {
display: inline-block;
border: none;
margin-left: 20px;
} <body>
<div class="box-row">
<div class="box box-1"></div>
</div>
<div class="box-row">
<div class="box box-2"></div>
<div class="box box-3"></div>
</div>
<div class="box-row">
<div class="box box-4"></div>
<div class="box box-5"></div>
</div>
</body>
Stack Overflow用户
发布于 2020-10-02 22:20:19
使用浮点：
.box {
background: maroon;
width: 200px;
height: 150px;
box-sizing:border-box;
float: left;
margin: 10px;
}
.box-1 {
border: 5px solid black;
}
.box-2 {
clear: left; /* start a new line here */
border: 5px double black;
}
.box-3 {
border: 5px dashed black;
}
.box-4 {
clear: left; /* and here */
border: 5px dotted black;
}<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
使用inline-block，你可以像下面这样尝试：
.box {
background: maroon;
width: 200px;
height: 150px;
box-sizing:border-box;
display: inline-block;
margin: 10px;
}
.box-1 {
display:block;
border: 5px solid black;
}
.box-2 {
border: 5px double black;
}
.box-3 {
border: 5px dashed black;
}
.box-4 {
display:inline;
}
.box-4::before {
content:"\A";
white-space:pre;
}
.box-4::after {
content:"";
border: 5px dotted black;
background: maroon;
width: 200px;
height: 150px;
box-sizing:border-box;
display: inline-block;
margin: 10px;
}<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box-4"></div>
<div class="box box-5"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64173002
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号