Я пытаюсь поплавать 3 divs рядом друг с другом. 1-й на левой стороне должен опираться налево, второй должен быть точно посередине, а третий - вправо.
Я пробовал его с поплавком, но не мог центрировать средний. Как я могу это исправить?
HTML
<div class="select_3_left">
</div>
<div class="vertical_line"></div>
<div class="select_3_middle">
</div>
<div class="vertical_line"></div>
<div class="select_3_right">
</div>
CSS
.select_3_left{
float: left;
width: 30%;
background: red;
}
.select_3_middle{
float: left;
width: 30%;
background: green;
}
.select_3_right{
float: right;
width: 30%;
background: blues;
}
.vertical_line{
float: left;
height: 330px;
width: 1px;
background: silver;
margin-left: 6px;
margin-right: 6px;
}
У ваших divs нет высоты, поэтому в настоящее время они мало что делают.
.select_3_left{
float: left;
width: 30%;
height:100px;
background: red;
}
.select_3_middle{
float: left;
width: 30%;
height:100px;
background: green;
}
.select_3_right{
float: left;
width: 30%;
height:100px;
background: blue;
}
.vertical_line{
float: left;
height: 330px;
width: 1px;
background: silver;
margin-left: 6px;
margin-right: 6px;
}
Здесь одно решение, которое включает меньше кода:
HTML:
<div class="select first"></div>
<div class="select"></div>
<div class="select"></div>
CSS:
.select {
width: 33.33%;
float: left;
height: 330px;
border-left: 1px solid silver;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.select.first {
border: none;
}
измените середину на margin:0 auto;