Как плавать 3 деления с полем влево и вправо 0px?

0

Я пытаюсь поплавать 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;
    }
Теги:

3 ответа

1
Лучший ответ

У ваших 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;
    }
2

Здесь одно решение, которое включает меньше кода:

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

  • 0
    Спасибо за отзыв, я им воспользовался :) +1
0

измените середину на margin:0 auto;

  • 0
    Я пробовал это раньше, но это работает, только если я удаляю «float: left» для среднего div из CSS. Но тогда правильные деления движутся ко дну ...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню