CSS для контейнерных div и переход на следующую строку
Я больше программист, чем дизайнер, и я пытаюсь использовать <div>, а не использовать таблицы, но я застреваю.
Вот что я пытаюсь сделать. Я настраиваю страницу опроса. Я хочу, чтобы текст каждого вопроса располагался вверху синего блока 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
Здесь очень мало тестирования, но я считать вам понадобится "clear: both;" в .greencontainer вместо "float: left". Также удалите "clear: both" из .bluecontainer
См. Дополнительную информацию по адресу: http://www.quirksmode.org/css/clearing.html
не используйте clear: both в вашем bluecontainer, потому что он очистит любой элемент с обеих сторон (слева и справа). и вы должны заставить красный контейнер плавать вправо.
Не перемещайте ничего, кроме красного контейнера, и перемещайте его вправо. Убедитесь, что HTML-код красных контейнеров размещен перед HTML-кодом синих контейнеров. Сохраняйте статическую ширину на синем контейнере и держите свободным: оба на зеленом контейнере.
У вас есть "clear: both" на синем div. Это то, что я считаю причиной проблемы.
Посмотрите на http://www.barelyfitz.com/screencast/html-training/css/ позиционирование/, у которого было несколько удобных демонстраций.
Вот что бы я сделал:
<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 Значения заполнения всегда должны иметь единицы, если они не равны нулю.
Спасибо, попробовал усложнить, чем было. Ваше решение имеет смысл. Спасибо за напоминание о синтаксисе CSS!
Я не думаю, что вам вообще нужно плавать зеленый контейнер, поскольку это содержащий div. Кроме того, выражение «clear: both» потребуется только при помещении нескольких синих / красных div в один и тот же зеленый контейнер.
Пытаться
.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, а не вокруг него.
Ссылка на изображение не работает, поэтому вопрос неясен.