Как я могу изменить положение 3 div, чтобы они были бок о бок?

Как я могу изменить положение 3 div, чтобы быть бок о бок?Как я могу изменить положение 3 div, чтобы они были бок о бок?

Вот мой HTML код:

<body> 
    <div class="div_header" id="div_header"></div> 
    <div class="div_left" id="div_left"></div> 
    <div class="div_main" id="div_main"></div> 
    <div class="div_right" id="div_right"></div> 
    </body>

Вот мой CSS код из 3-х Див:

.div_header { 
    height: 40px; 
    width: 100%; 
} 

.div_left { 
    float: left; 
    min-height: 300px; 
    width: 250px; 
} 

.div_main { 
    min-height: 300px; 
    margin-left: 250px; 
    margin-right: 250px; 
} 

.div_right { 
    float: right; 
    min-height: 300px; 
    width: 250px; 
}

Спасибо!

источник

2014-02-09 user3140252

Перестановки разметки с правым всплывающим DIV перед главным DIV

FIDDLE

<div class="div_header" id="div_header"></div> 
<div class="div_left" id="div_left"></div> 
<div class="div_right" id="div_right"></div> 
<div class="div_main" id="div_main"></div>

источник

2014-02-09 07:09:47 Danield

Интересно. Почему порядок, в котором вы их обрабатываете, имеет значение, если ширина всех размеров соответствует размеру? – leigero

+1 Гораздо лучшее решение, чем мое. – TwilightSun

работа в порядке, спасибо. :) – user3140252

Просто добавьте float: left; в .div_main

источник

2014-02-09 07:08:28 TwilightSun

спасибо, и как я могу сделать .div_main ширину 100% ? – user3140252

Вы можете использовать CSS "известков" для контроля ваша основная ширина div, чем добавление float: осталось на нем.

.div_main { 
    float: left; 
    min-height: 300px; 
    width: calc(100% - 500px); <-- 250px+250px(div-left's width + div-right's width) 
    background-color: blue; 
}

вот пример:

http://jsfiddle.net/creed88/ucKw7/

источник

2014-02-09 07:13:28

Вы можете добавить float: left; в .div_main или переставить Див-х.

Если вам не нужно использовать макет с плавающей точкой, вы можете изменить div-inline-block.

Div являются элементами уровня блока по умолчанию, и если вы хотите, чтобы все было встроено, вам нужно изменить свойство отображения.

Возможно, css ниже будет работать для вас.

Fiddle

.div_left, 
.div_main, 
.div_right { 
    display: inline-block; 
    min-height: 300px; 
    width: 250px; 
}

источник

2014-02-09 07:14:37 Alex

РАБОТА DEMO ->CLICK HERE

добавить класс .divpull и добавить float:left к классу :)

источник

2014-02-09 07:15:35

Как я могу изменить положение 3 div, чтобы они были бок о бок?

ответ

Смежные вопросы