html - 如何对齐一行中的框

Question

这是我现在拥有的:

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

这是我的代码:

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 -->

CSS:

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

/*width: 850px;*/
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: 350px;
border: 5px solid navy;
margin: 25px;
}

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

width: 350px;
border: 5px solid navy;
margin: 25px;
}

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

width: 350px;
border: 5px solid navy;
margin: 25px;
}

我也尝试将 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;}

Answer 1

请输入此代码 DEMO

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

/*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{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;
  display:inline-block;

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

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

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

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

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