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