Могу ли я добиться этого макета с помощью плавающих элементов CSS?

Как и многие фронтенд-разработчики, которых я встречал в своей карьере, я разбираюсь в HTML, CSS и JavaScript на профессиональном уровне, но тонкости плавающих элементов CSS по-прежнему остаются моей ахиллесовой пятой.

Мой последний проект имеет простой макет, который выглядит как идеальный кандидат для улучшения моего понимания поплавков. Это тривиально для достижения с абсолютным позиционированием, но я хотел бы определить, могут ли поплавки выполнить то же самое.

Вот упрощенный макет желаемого макета:

простой макет

Я создал пример JSBin в качестве хорошей отправной точки:

http://jsbin.com/UPUzUWU/1/edit?html,css,output

Я потратил около 20 минут, играя с тем, какие поля перемещаются, как они перемещаются, какие очищаются, как они очищаются и даже с порядком HTML. Я немного подобрался, но сигары нет.

Кто-нибудь может сделать эту работу, не прибегая к абсолютному позиционированию (при необходимости можно изменить порядок HTML)? Если да, можете ли вы также сделать все возможное, чтобы объяснить принципы, лежащие в основе этого?

Спасибо!

Изменить:

Извините, я должен был уточнить - хотя изменение порядка HTML для блоков в порядке, я бы не стал объединять несколько блоков в общие родительские элементы. Пожалуйста, предположим, что семантически все они будут содержать контент на одном уровне иерархии макета (т. е. все они являются семантическими братьями и сестрами), поэтому в идеале они не будут совместно использовать несемантические родительские элементы, которые существуют только для целей упрощения стиля. .

Кроме того, этот подход позволяет просто перемещать три элемента слева, что является слишком простым решением, чтобы пролить больше света на то, как работают плавающие элементы.


html css css-float
person Bungle    schedule 25.01.2014    source источник
comment
Можно ли изменить html? например: поле 1 и поле 2, завернутые в div?   -  person Ani    schedule 26.01.2014
comment
Если вы можете изменить HTML для добавления контейнера: jsbin.com/UPUzUWU/6/edit   -  person Zach Saucier    schedule 26.01.2014
comment
Я предполагаю, что все div должны быть в одном родительском элементе? Если бы не одно решение, было бы создание 3 столбцов с двумя div, сложенными в левом и правом столбцах, а затем один div в центре.   -  person jd182    schedule 26.01.2014
comment
jsbin.com/UPUzUWU/9/edit (только одно число с плавающей запятой, структура HTML не изменяется, но ... отрицательные поля :))   -  person sinisake    schedule 26.01.2014
comment
Спасибо, все - да, я должен был упомянуть, что я бы предпочел не изменять структуру HTML, добавляя родительские элементы. Сейчас обновлю вопрос.   -  person Bungle    schedule 26.01.2014
comment
@jd182: Спасибо! Это самое близкое к тому, чего я пытаюсь достичь; все равно было бы хорошо определить, возможно ли это без использования отрицательных полей.   -  person Bungle    schedule 26.01.2014
comment
Можем ли мы изменить последовательность div?   -  person Ani    schedule 26.01.2014
comment
@Ani: Да, все в порядке. Порядок на самом деле не имеет значения, это просто добавление новых HTML-контейнеров, что кажется мне не семантическим.   -  person Bungle    schedule 26.01.2014
comment
Привет, могу я использовать чистую собственность?   -  person amaro    schedule 28.01.2014
comment
@amaro: Конечно! Чтобы было ясно, я не пытаюсь сделать это упражнение с искусственными ограничениями — я просто пытаюсь понять, возможно ли построить этот тип макета, используя плавающие значения вместо абсолютного позиционирования, которое я обычно использую. В процессе я надеюсь лучше понять нюансы поплавков.   -  person Bungle    schedule 29.01.2014

Ответы (3)


arrow_upward
3
arrow_downward

Здесь: http://jsbin.com/UPUzUWU/11/edit

 <div class="box-holder">
    <div class="vertdiv">
     <div class="box box-1 box-square">1</div>
     <div class="box box-2 box-square">2</div>
    </div>
    <div class="box box-3 box-tall">3</div>
    <div class="vertdiv">
      <div class="box box-4 box-square">4</div>
      <div class="box box-5 box-square">5</div>
    </div>
 </div>

CSS

.vertdiv{
   float:left;
 }

 .box-tall {
   float: left;
   height: 200px;
 }

Использование процентов: http://jsbin.com/UPUzUWU/13/edit

CSS

.box-square {
   width:100%;
   height: 50%;
 }

 .box-tall {
    float:left;
    height: 100%;
    width:34%;
 }

 .vertdiv{
   float:left;
   width:33%;
   height:100%;
 }
person Ani    schedule 25.01.2014
comment
Отлично! Вы можете сделать это с % вместо пикселей? - person Francisco Corrales Morales; 26.01.2014
comment
Да... я могу... Подожди - person Ani; 26.01.2014
comment
@Ani: Большое спасибо за ответ! Пожалуйста, смотрите мое редактирование выше - я бы предпочел избегать использования дополнительных родительских элементов. - person Bungle; 26.01.2014
comment
Такие люди, как вы, делают StackOverflow достойным внимания! - person Francisco Corrales Morales; 26.01.2014

arrow_upward
1
arrow_downward

Вот полная высота и ширина и полностью адаптивное решение: http://jsbin.com/upAFigEp/2/edit

person Sergei Beregov    schedule 25.01.2014
comment
Спасибо за ответ, Сергей! Пожалуйста, ознакомьтесь с моим пояснением к вопросу - я бы предпочел избегать использования несемантических родительских элементов. Плавный/отзывчивый макет — это хорошо, но не обязательно. - person Bungle; 26.01.2014

arrow_upward
0
arrow_downward

Посмотрите на этот JsFiddle.

    .box-holder {
  width: 300px;
  height: 200px;
  background-color: #fff;
  position: absolute;
}

.box {
  width: 100px;
  float: left;
}

.box-square {
  height: 100px;
}

.box-tall {
  height: 200px;
}

.box-1 {
  background-color: #eee;
  float:left;
}

.box-2 {
  background-color: #ddd;
    float:left;
    position: absolute;
    top: 100px;
}

.box-3 {
  background-color: #ccc;
}

.box-4 {
  background-color: #bbb;
}

.box-5 {
  background-color: #aaa;
}
person Siva    schedule 26.01.2014
comment
Спасибо, Сива, но это по-прежнему зависит от абсолютного позиционирования для .box-2. Есть ли способ избежать этого? - person Bungle; 26.01.2014