CSS для контейнерных элементов и перехода на следующую строку - PullRequest
Новая
       28

CSS для контейнерных элементов и перехода на следующую строку

4 голосов
/ 05 ноября 2008

Я больше программист, чем дизайнер, и я пытаюсь охватить <div> s, а не использовать таблицы, но я застреваю.

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

Макет http://img528.imageshack.us/img528/4330/divsforsurveyop2.jpg

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

.greencontainer{
    width:100%;
    spacing : 10 10 10 10 ;
    float: left; 
}

.redcontainer{ 
    float: left; 
    width: 20px;
    padding: 2 0 2 0;
    font-size: 11px;
    font-family: sans-serif; 
    text-align: center; 
}

.bluecontainer{ 
    clear: both;
    float: left; 
    width: 400px; 
    padding: 2 2 2 10;
    font-size: 11px;
    font-family: sans-serif; 
    text-align: left; 
}

Ответы [ 6 ]

2 голосов
/ 05 ноября 2008

Вот что я бы сделал: 

<div class="greencontainer">
  <div class="redcontainer">
    <input type="checkbox" />
  </div>
  <div class="bluecontainer">
    <label>Text about this checkbox...</label>
  </div>
</div>

с css: 

.greencontainer{
   float:left;
   clear:left;
   width:100%;
 }
 .redcontainer{
   float:right;
   width:20px;
 }
 .bluecontainer{
   margin-right:20px;
 }

PS Значения заполнения всегда должны иметь единицы, если они не равны нулю.

2 голосов
/ 05 ноября 2008

Не плавайте ничего, кроме красного контейнера, и плавайте вправо. Убедитесь, что HTML-код для красных контейнеров размещен перед HTML-кодом для синих контейнеров. Сохраняйте статическую ширину на синем контейнере и не допускайте попадания: оба на зеленый контейнер.

1 голос
/ 05 ноября 2008

не используйте clear: оба на вашем синем контейнере, потому что он очистит любой элемент с обеих сторон (слева и справа). и вы должны заставить красный контейнер плыть направо.

0 голосов
/ 05 ноября 2008

Я не думаю, что вам вообще нужно перемещать зеленый контейнер, поскольку он содержит div. Кроме того, оператор «clear: both» понадобится только в том случае, если поместить несколько синих / красных делений в один зеленый контейнер.

Попробуйте 

.greencontainer{
    width:100%;
spacing : 10 10 10 10 ;

}

.bluecontainer{ 
    float: left; 
    width: 400px; 
    padding: 2 2 2 10;
    font-size: 11px;
font-family: sans-serif; 
    text-align: left; 
}
.redcontainer{ 
    float: right; 
    width: 20px;
    padding: 2 0 2 0;
    font-size: 11px;
font-family: sans-serif; 
    text-align: center; 
}

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

0 голосов
/ 05 ноября 2008

У вас есть "ясно: оба" на синем div. Вот что я думаю вызывает проблему.

Посмотрите на http://www.barelyfitz.com/screencast/html-training/css/positioning/, на котором было несколько удобных демонстраций.

0 голосов
/ 05 ноября 2008

Очень небольшое тестирование здесь, но я думаю вы захотите "очистить: оба;" на .greencontainer вместо "float: left". Также удалите «clear: both» из .bluecontainer

Дополнительная информация по адресу: http://www.quirksmode.org/css/clearing.html

...