时间戳

首页 > 解决方案 > 将三个 div 并排对齐在一行中

html - 将三个 div 并排对齐在一行中

问题描述

我希望在没有任何 flexbox 和网格的情况下并排对齐三个 div。

这是我正在寻找的风格：图片

这就是我目前得到的：图片

.container {
    width: 600px;
    border: 1px solid black;
}
.box-1 {
    width: 180px;
    height: 100px;
    background: grey;
    margin: 10px;
    display: inline-block;
}
.box-2 {
    width: 180px;
    height: 100px;
    background: grey;
    margin: 10px;
    display: inline-block;
}
.box-3 {
    width: 180px;
    height: 100px;
    background: grey;
    margin: 10px;
    display: inline-block;
}
<div class="container">
    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>
</div>

注意：只是询问对齐，而不是边框​​，背景等

编辑：父容器的宽度为 600 像素。它不能改变。孩子们有 180 像素的宽度和 100 像素的高度，以及 10 像素的边距。

标签： htmlcss

解决方案

嘿增加容器的宽度如下：

.container {
    width: 1000px;
    border: 1px solid black;
}
.box-1 {
    width: 180px;
    height: 100px;
    background: grey;
    margin: 10px;
    display: inline-block;
}
.box-2 {
    width: 180px;
    height: 100px;
    background: grey;
    margin: 10px;
    display: inline-block;
}
.box-3 {
    width: 180px;
    height: 100px;
    background: grey;
    margin: 10px;
    display: inline-block;
}
<div class="container">
    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>
</div>

或display : flex在您的容器中使用两者都会有所帮助....

推荐阅读