CSS Поплавки: 3 плавающих ящика

Question

У меня возникли проблемы с некоторыми плавающими ящиками в CSS.

<div class="container"> 
<div class="one">One</div> 
<div class="two">Two</div> 
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div> 
</div> 

Вот ручка:

http://codepen.io/anon/pen/myKzMd

Я хочу, чтобы левый зеленый ящик, чтобы начать на той же высоте, что и красного. Структура HTML должна оставаться такой, как есть. Спасибо, Sascha

Answer 1

Этот код снизу даст желаемый результат.

HTML

<div class="container"> 
    <div class="one">One</div> 
    <div class="two">Two</div> 
    <div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div> 
</div> 

CSS

.container { 
    height:400px; 
    border: 5px solid green; 
} 
.one { 
    height: 100px; 
    background: red; 
    width: 60%; 
    float: right; 
    margin-bottom: 10px; 
} 
.two { 
    height: 100px; 
    background: blue; 
    width: 60%; 
    float: right; 
} 
.tre { 
    height: 150px; 
    background: green; 
    width: 40%; 
} 

EDIT: Обновленный ответ с полным кодом, чтобы избежать путаницы, так как OP обновила демо в этом вопросе. Поэтому никакого поплавка на .tre не было бы лучшим решением для меня.

Answer 2

попробовать это:

.container { 
    height:400px; 
    border: 5px solid green; 
} 
.one { 
    height: 100px; 
    background: red; 
    width: 60%; 
    float: right; 
    margin-left:40%; 
    margin-bottom: 10px; 
} 
.two { 
    height: 100px; 
    background: blue; 
    width: 60%; 
    float: right; 
} 
.tre { 
    height: 150px; 
    background: green; 
    width: 40%; 
} 

Answer 3

.container { 
    height:400px; 
    border: 5px solid green; 
} 

.one { 
    width: 40%; 
    height: 100%; 
    float: left; 
    background: blue; 
} 

.two, .three { 
    width: 60%; 
    height: 50%; 
    float:right; 
} 

.two { 
    background: yellow; 
} 

.three { 
    background: red; 
} 

Answer 4

.tre { 
    float: left; 
} 

Не забудьте положить переполнения: скрытый в родительских ДИВ т.е. .container, потому что, как только вы плаваете дочерние элементы, которые вы должны положить переполнения: скрытый в его

Answer 5

Вы можете изменить свою структуру, как показано ниже ...

<div class="container"> 
    <div class="one">One</div> 
    <div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div> 
    <div class="two">Two</div> 
</div>