CSS Floats: 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 должна оставаться как есть. Спасибо Саша

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

РЕДАКТИРОВАТЬ: обновил ответ с полным кодом, чтобы избежать путаницы, так как OP обновил демо в вопросе. Так что не плавать на .tre будет лучшим решением для меня.

Answer 2

.tre {
  float: left;
 }

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

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

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

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

Answer 5

Попробуйте это:

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