Question

我正试图将3个div放在一起。左边的第一个应该向左倾斜，第二个应该正好在中间，第三个应该向右倾斜。

我用漂浮物尝试过但不能居中。我该如何解决这个问题？

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

Answer 1

这是一个涉及较少代码的解决方案：

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

JSFiddle

Answer 2

你的div没有高度，所以他们目前做的不多。

Fiddle

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

Answer 3

将中间值更改为margin:0 auto;

如何浮动3个div并留有余量＆amp;对0px？

3 个答案: