Html 如何对齐一行中的方框

以下是我现在拥有的：

但我想要更像这样的东西：

这是我的代码：

HTML:

    <div class = "gros_box">    <!-- gros box -->

    <div class = "titre_num_serie"> N° Serie : 
    </div> <!-- end titre n° serie -->

    <div class = "model_box"> Info Basic : 
    </div> <!-- end model box -->

    <div class = "compo_box"> Composant : 
    </div> <!-- end compo box -->

    <div class = "autre_box"> Autres Info : 
    </div> <!-- end autre info -->

</div> <!-- end du gros box -->

我还尝试将3个框放在一个跨度中，尝试使用内联，尝试使用宽度/边距/填充，但我无法真正得到我想要的：/

编辑 我的解决方案

.gros_box{
padding-top : 20px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 50px;
border: 5px solid navy;
margin: 25px;
}

.titre_num_serie{

padding-top : 10px;
padding-right : 10px;
padding-left : 10px;
padding-bottom : 10px;
width: 200px;
border: 5px solid navy;
margin:0 auto;
text-align : center;

}

.model_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;
width: 25%;
height : 350px;
border: 5px solid navy;
margin: 25px;

}

.compo_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;
width: 30%;
height : 350px;
border: 5px solid navy;
margin: 25px;

}

.autre_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;
width: 25%;
height : 350px;
border: 5px solid navy;
margin: 25px;

}

.model_box ,.compo_box,.autre_box{display: inline-block;}
.autre_box{margin-right: 0;}

您可以像这样添加css

.model_box ,.compo_box,.autre_box{display: inline-block;}
.autre_box{margin-right: 0;}

请输入此代码

---

您可以按以下方式更改样式以达到您的要求

.gros_box {
    padding-top : 20px;
    padding-right : 50px;
    padding-left : 50px;
    padding-bottom : 50px;
    /*width: 850px;*/
    border: 5px solid navy;
    margin: 25px;
}
.titre_n°_serie {
    padding-top : 10px;
    padding-right : 10px;
    padding-left : 10px;
    padding-bottom : 10px;
    width: 200px;
    border: 5px solid navy;
    margin:0 auto;
    text-align : center;
}
.model_box, .compo_box, .autre_box {
    display: inline-block;
    margin: 20px 10px;
    height: 300px;
}
.model_box {
    width: 25%;
    border: 5px solid navy;
}
.compo_box {
    width: 30%;
    border: 5px solid navy;
}
.autre_box {
    width: 25%;
    border: 5px solid navy;
}

我建议您使用，您不必担心这些盒子排列导航栏，而且它响应速度快。适用于所有屏幕尺寸，包括手机、平板电脑。这将使设计任何页面变得更容易

.gros_box{
padding-top : 20px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 50px;

/*width: 850px;*/
border: 5px solid navy;
margin: 25px;

float:left;
}

.titre_num_serie{

padding-top : 10px;
padding-right : 10px;
padding-left : 10px;
padding-bottom : 10px;

width: 200px;
border: 5px solid navy;
margin:0 auto;

text-align : center;

}

.model_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;

width: 230px;
height:250px;
border: 5px solid navy;
margin: 25px;
float:left;
}

.compo_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;

width: 230px;
border: 5px solid navy;
margin: 25px;

float:left;
height:250px;
}

.autre_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;

width: 230px;
border: 5px solid navy;
margin: 25px;

height:250px;
float:left;
}

---

使用这个css

你可以

浮动

它们，

左

居中和

右

如果你不需要强大的浏览器支持，我会查找flexbox。我不会使用

标题系列

类名中的

°

。由于它不是一个标准的

[a-z0-9]

字符，这将使任何人，甚至可能是你自己，在以后的日子里都很难引用它。我还尝试了一个“float:left”作为我的.model_box，但它什么也没做：/@Novocaine:thx，你是对的，我会删除它。当我做你的代码时，它删除了我所有的框边和我的“gros_box”和“titre_num_serie”的衬垫：/这意味着有什么地方做错了。。。。只有一个草图在将来你自己可以设置高度和宽度，即使你想被考虑到，需要添加框尺寸的边界框；此解决方案适用于固定宽度布局。我正在使用Boostrap，但并非所有地方都使用，因为我不知道它是如何工作的。我不知道为什么，但我的填充物和框边与您的代码中的“gros_box”和“titre_num_serie”不符：/Thank^在混合了所有答案后，我终于得到了我想要的：D

.gros_box {
    padding-top : 20px;
    padding-right : 50px;
    padding-left : 50px;
    padding-bottom : 50px;
    /*width: 850px;*/
    border: 5px solid navy;
    margin: 25px;
}
.titre_n°_serie {
    padding-top : 10px;
    padding-right : 10px;
    padding-left : 10px;
    padding-bottom : 10px;
    width: 200px;
    border: 5px solid navy;
    margin:0 auto;
    text-align : center;
}
.model_box, .compo_box, .autre_box {
    display: inline-block;
    margin: 20px 10px;
    height: 300px;
}
.model_box {
    width: 25%;
    border: 5px solid navy;
}
.compo_box {
    width: 30%;
    border: 5px solid navy;
}
.autre_box {
    width: 25%;
    border: 5px solid navy;
}

.gros_box{
padding-top : 20px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 50px;

/*width: 850px;*/
border: 5px solid navy;
margin: 25px;

float:left;
}

.titre_num_serie{

padding-top : 10px;
padding-right : 10px;
padding-left : 10px;
padding-bottom : 10px;

width: 200px;
border: 5px solid navy;
margin:0 auto;

text-align : center;

}

.model_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;

width: 230px;
height:250px;
border: 5px solid navy;
margin: 25px;
float:left;
}

.compo_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;

width: 230px;
border: 5px solid navy;
margin: 25px;

float:left;
height:250px;
}

.autre_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;

width: 230px;
border: 5px solid navy;
margin: 25px;

height:250px;
float:left;
}