Как заставить плавающие div заполнять пространство
Я пытаюсь создать панель рабочего процесса на веб-странице.
Элементы в рабочем процессе могут иметь разную длину.
Элементов может быть достаточно, чтобы заполнить всю ширину экрана, поэтому поток необходимо перенести на следующую строку.
Для этого я использую левые плавающие div.
Однако я бы хотел, чтобы div занимали соответствующую ширину экрана.
Если только три элемента могут уместиться в одной строке, я бы хотел, чтобы эти элементы равномерно помещались в строке с учетом ширины каждого отдельного элемента.
Все, что я могу получить на данный момент, - это последний div в строке, чтобы заполнить оставшееся пространство, что часто означает, что все мои элементы выровнены по левому краю, например Я могу получить такой макет:
AAAA -> BBBBB -> CCCCCCCCCCCCCCCCCCC -> DD -> EEE -> FFFFF -> GGGG -> HHHHH
но на самом деле я хочу, чтобы это выглядело примерно так:
AAAA -> BBBBB ->
CCCCCCCCCCCCCCCCCCC -> DD -> EEE ->
FFFFF -> GGGG -> HHHHH
если вы понимаете, о чем я.
Нужно ли мне использовать для этого таблицы, а не плавающие div?
Ответы 6
Вероятно, можно было бы увидеть окружающую разметку, чтобы понять, какие элементы у вас есть. Вы можете попробовать создать окружающий div с margin: 0 auto;
Вам, вероятно, понадобится окружающий div для каждого уровня.
Не тратьте время зря, просто зайдите сюда:
Спасибо за быстрые ответы. Я попробую то, что вы предлагаете.
В настоящее время я пытаюсь сделать это с помощью списка, хотя и с div у меня ничего не вышло.
Я попытался вытащить HTML из моих JSP, чтобы попытаться продемонстрировать, где я собираюсь с этим.
У промежутков есть класс «навигации», который в основном рисует фоновое изображение вокруг текста, чтобы он выглядел как кнопка, а также устанавливает поля / отступы и т. д. Я пропустил CSS, который напрямую связан с отрисовкой кнопки, так как это стандартный фреймворк в нашей системе для рисования кнопки. Я включил используемый мной CSS, который напрямую связан с рабочим процессом.
Я пытаюсь нарисовать начальное изображение перед первой кнопкой, а затем нарисовать фоновые изображения за каждой кнопкой, чтобы провести линию между каждой кнопкой, чтобы представить поток. Затем у меня есть конечное изображение в конце потока.
<html>
<body>
<STYLE>
#nav, #nav ul {
list-style: none;
margin: 0px;
width: 700px;
}
#nav li {
list-style: none;
float: left;
padding-left: 10px;
padding-right: 10px;
width: auto;
background-image: url(/lookandfeel/images/navMenuDiv.gif);
background-repeat: repeat-x;
}
li#ending {
background-image: url(/lookandfeel/images/navMenuRight.gif);
background-repeat: no-repeat;
}
li#start {
background-image: url(/lookandfeel/images/navMenuLeft.gif);
background-repeat: no-repeat;
}
.navigation a {
background-image: url(/pdr/images/navigation.gif);
}
</STYLE>
<ul id = "nav" style = "width: 100%;border: 1px solid">
<li id = "start" />
<LI >
<SPAN class = "navigation" >AAAAAAAAAA</SPAN>
</li>
<LI >
<SPAN class=navigation >BBBB</SPAN>
</li>
<LI >
<SPAN class=navigation>CCCCCCCCCCCCCCCCC</SPAN>
</li>
<LI>
<SPAN class=navigation>DDDDDDDDD</SPAN>
</li>
<LI>
<SPAN class=navigation>EEEEEEEE</SPAN>
</li>
<LI>
<SPAN class=navigation>FFFFFFFFFFFFFF</SPAN>
</li>
<li>
<SPAN class=navigation>GGGGGGGGGGGGGGGGGGGGGGGGGGGGG</SPAN
</LI>
<li id = "ending" />
</ul>
</body>
</html>
Установка для элементов li отображения: inline и присвоение ul свойства text-align: justify частично поможет вам (по крайней мере, в FFX3 и IE7). Однако это вызывает некоторые сложности при применении фоновых изображений.
просто пара других указателей. У вас не должно быть пустых тегов li, это семантически неверно. Также в идеальном мире вы должны не указывать имена макетов атрибутов id.
Лично я бы поместил начальное изображение на ul, а затем поместил закрывающее изображение на последний li.
Хотя мне не нравится говорить, что что-то невозможно сделать, я думаю, что должен согласиться с @johnners относительно окружающего элемента для каждого уровня навигации. Даже если бы вы использовали CSS макета таблицы, вам понадобился бы какой-то окружающий элемент для каждой «строки», чтобы получить правильный интервал слева и справа.
Я думаю, что ваша диаграмма бесполезна, похоже, вы хотите, чтобы все было по центру ... но на самом деле вы хотите, чтобы все элементы занимали ширину страницы ...