如何连续对齐框

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

rty此代码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;
}

Answer 2

你可以添加像

这样的CSS

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

Answer 3

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

.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;
}

<强> DEMO

Answer 4

我建议你使用Bootstrap CSS，你不必担心这些盒子排列导航栏，而且它也是响应式的。适用于所有屏幕尺寸，包括手机，平板电脑。设计任何页面都会更容易。

Answer 5

.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