маржа не работает, как он должен работать

Question

я хотел достичь как этот

+-----------+----------------+----------------+ 
|   |    |    | 
+-----------+----------------+----------------+ 

но получил как этот

+-----------+----------------+ 
|   |    | 
+-----------+----------------+----------------+ 
          |    | 
          +----------------+ 

Вот это DEMO

Answer 1

Вашего кода хорошо, но вы должны изменить порядок элементов:

<div class="wrap cf"> 
    <div class="one">one</div> 
    <div class="three">three</div> 
    <div class="two">two</div> <!-- put the element without class right to the end --> 
</div> 

http://jsfiddle.net/bFqTv/30/

Answer 2

вам нужно увеличить width в .wrap, я увеличил его до 800 и все они в одной строке

Answer 3

У вас есть обертка 500 пикселей, и попытайтесь поместить три (3) коробки в 200px? Это просто не может работать ... Увеличьте свою обертку до тех пор, пока она не будет соответствовать сумме всех ящиков, которые вы хотите иметь. Или сделать ваши ящики меньше ...

Ох, и убедитесь, что вы увеличить окно достаточно, чтобы показать полный ххх пикселей ...

Answer 4

Если все, что вам нужно сделать, это сохранить эти DIVs (один, два и три) подряд, все они должны вписываться в 500px, как это:

.wrap{width: 500px; background: red; position: relative; margin: 0 auto;} 
.one{width: 200px; float: left; background: blue;} 
.three{width: 100px; float: left; background: blue;} 
.two{width: 200px; float: left; background: red;} 

Также обратите внимание, что я дал ширину для каждого DIV

Answer 5

Это один из способов сделать это:

.wrap{width: 500px;overflow:hidden; background: red; position: relative; margin: 0 auto;} 
.one{width: 200px; float: left; background: blue;} 
.three{width: 200px; float: left; background: blue;} 
.two{width: 100px; float: left;} 

NB очистить поплавок правильно, а не просто overflow: hidden

Answer 6

• The DIV с классом «.two» (который является середина 3 коробки) представляет собой блок-элемент без какого-либо заданного поплавка влево или вправо, поэтому он очистится и займет оставшееся пространство первой строки.
• А также поля, добавленные в '.two' aren; t требуется.
• Наконец, вы забыли «.cf» (код для clearfix) в css.

Вот возможное решение: http://jsfiddle.net/bFqTv/28/

.wrap{width: 500px; background: red; position: relative; margin: 0 auto;} 
.one{width: 200px; float: left; background: blue;} 
.three{width: 200px; float: left; background: blue;} 
.two{ width:100px; float:left;} 

/**Source:http://nicolasgallagher.com/micro-clearfix-hack/**/ 
.cf:before, 
.cf:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.cf:after { 
    clear: both; 
} 


/** 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 
.cf { 
    *zoom: 1; 
} 

Answer 7

Используйте следующие CSS, если вы не хотите, чтобы увеличить ширину:

.wrap cf{width: 500px; background: red; position: relative;} 
.one{width: 200px; float: left; background: blue;} 
.three{width: 200px; background: blue;float:left;} 
.two{width:200px;float:left;background:red;} 

Answer 8

Вам просто нужно сделать два вещи:

1. Поплавок все внутренние элементы, оставшиеся с float: left;
2. Дайте всем innerelements ширину: width: 33%

Обновленный CSS:

.wrap{ 
    width: 500px; 
    margin: 0 auto; 
} 
.one, .two, .three { 
    float: left; 
    width: 33%; 
} 
.one, .three { 
    background-color: blue; 
} 
.two{ 
    background-color: red; 
} 

Вы HTML:

<div class="wrap cf"> 
    <div class="one">one</div> 
    <div class="two">two</div> 
    <div class="three">three</div> 
</div> 

Вот рабочий пример: http://jsfiddle.net/bFqTv/29/

Answer 9

В вас первое имя класса в HTML является обертка сравни но вы используете только обертку в вашем CSS.I думаю, вам нужно установить 3 DIV внутри 500px width.Use CSS, как я упомянул

.wrap cf{width: 500px; background: red; position: relative; margin: 0 auto;} 
.one{width: 200px; background: blue;float: left} 
.three{width: 100px; background: green; float: left} 
.two{width: 200px; background: red; float: left } 

Этот CSS хорошо работает на моей стороне. Надеюсь, что он работает и на вашей стороне.

Answer 10

.wrap{width: 500px; background: red; position: relative; margin: 0 auto} 
.one{width: 100px; float: left; background: blue;} 
.three{width: 100px; float: left; background: blue;} 
.two{width:100px; float: left;} 

Если требуется красный фон для вторичного использования сНа ниже

.wrap{width: 500px; background: red; position: relative; margin: 0 auto} 
.one{width: 100px; float: left; background: blue;} 
.three{width: 100px; float: left; background: blue;} 
.two{width:100px; float: left; background: red;} 

Благодарности