Как создать определенный макет в HTML?

Я хотел бы создать конкретный макет в HTML, но есть некоторые трудности.

Изображения легче понять, чем слова, поэтому вот что у меня есть:

Это нормально, но как только div1 станет выше, я получу следующее:

И моя цель - сделать что-то подобное:

На данный момент я использую div, что, вероятно, не очень хорошая идея. Любая помощь приветствуется. Заранее большое спасибо.

 Mr_Green19 февр. 2013 г., 10:44
вложенный div 'с ..?
 Miloš19 февр. 2013 г., 10:45
@Mr_Green, прости?
 Mr_Green19 февр. 2013 г., 10:47
Я имею в виду, что вы можете иметь любой тип макета, используя вложенный div 's ... но кажется, что вы хотите изменить макет при изменении высоты div ... это так?
 Miloš19 февр. 2013 г., 10:45
Я попытался создать 3 div, что дает мне второй результат изображения. Тогда я попытался использовать простой <a> тег вместо 3-го деления, и все тот же результат.

Ответы на вопрос(3)

Решение Вопроса

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

HTML


    
    
        
        
    

CSS

#wrapper { background: #44BBF0; }
#sidebar { float: left; width: 100px; height: 500px; background: #485F40; }
#main_content { float: right; }
#top_right { width: 200px; height: 200px; background: #FF553F; }
#botom_right { width: 200px; height: 300px; background: #B0DE91; }

.clearfix:before,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1; /* IE < 8 */
}

Вот ссылка на скрипку JS, чтобы показать вам, как она выглядит:http://jsfiddle.net/ddxYB/

Обязательно очистите упаковщик div. Поскольку он содержит только плавающие элементы, он не будет иметь высоты, если вы нет. В примере, который я использовал, я установил высоты, чтобы сэкономить время, но это было бы так же хорошо, если бы вы использовали автоматическую высоту и позволяли элементам div принимать высоту содержимого.

Это скриншот из кода JSFiddle:

 Miloš19 февр. 2013 г., 11:45
Отлично, этоэто то, что я искал.
 Miloš19 февр. 2013 г., 12:04
Я столкнулся с проблемой, не могли бы вы помочь мне. При настройке в JSFiddle:#sidebar { float: left; width: 100px; height: 50px; background: #485F40; } затем синий div идет на левую сторону оранжевого div, и он должен быть на дне оранжевого div.
 Hendeca19 февр. 2013 г., 12:51
@ Милос Ой! Моя ошибка, у меня была опечатка в css! Я случайно записал #right_bottom как #right_botom. Вот's фиксированный jsFiddle:jsfiddle.net/ddxYB/4
 Miloš19 февр. 2013 г., 13:58
Еще раз спасибо, но это не совсем то, что я ищу. Я бы хотел, чтобыНижний правый" Div также принимаетбоковая панель» пробел, если боковая панель меньше, чем "в правом верхнем углу" дела.
 Rafe03 мар. 2013 г., 06:26
Это на самом деле предназначено для первого изображения в списке. У голубого дива нет возможности когда-либо переместиться влево.
 Hendeca19 февр. 2013 г., 23:26
@ Милос звучит так, как будто это все еще не совсем то, что тыговорим, но, надеюсь, этоближе? Это то же самое, за исключением того, что не помещаем два правых элемента div в их собственный элемент div:jsfiddle.net/ddxYB/5

Сначала вы должны понять концепциюконтейнер.

Создайте 2 контейнера в виде столбцов:

Левый столбец, содержащий div1

Правый столбец, содержащий div2 и div3

Так что для HTML создайтесостав как это:


    div 1



    div 2
    div 3

И позиционирование столбцов с помощью CSS:

div.col1 {
    float: left;
    width: 200px;
}

div.col2 {
    float: left;
    width: 400px;
}
 jjj19 февр. 2013 г., 12:16
Это не для конечного результата, а для объяснения использования контейнера div (столбца). Важный шаг
 Miloš19 февр. 2013 г., 12:13
Это не работает, чтобы получить что-то, как описано на рисунке 1. Левая сторона экрана всегда будет пустой.
 Miloš19 февр. 2013 г., 12:18
Ах, хорошо, извини. У вас есть идеи, как достичь моей цели?

Установите свою позицию CSS каждого div на абсолютное и расположите их, используя margin.

#divName {
position: absolute;
margin: 10px 10px 10px 10px; //position them wherever you want.
}
 jjj19 февр. 2013 г., 10:55
абсолютная позиция не очень хороший способ начать.

Ваш ответ на вопрос