Как заставить плавающие div заполнять пространство

StackOverflow https://stackoverflow.com/questions/326059

  •  11-07-2019
  •  | 
  •  

Вопрос

Я пытаюсь создать " рабочий процесс " панель на веб-странице.

Элементы в рабочем процессе могут быть разной длины.

Может быть достаточно элементов, чтобы заполнить ширину экрана, поэтому поток должен быть перенесен на следующую строку.

Я использую левые плавающие div для этого.

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

Если в одну строку могут поместиться только три элемента, то я бы хотел, чтобы эти элементы равномерно помещались в строке с учетом ширины каждого отдельного элемента.

В настоящий момент все, что я могу получить, это заполнить оставшееся пространство последним делением в строке, что часто означает, что все мои элементы выровнены по левому краю, например, Я могу получить макет как это: 

AAAA -> BBBBB ->
CCCCCCCCCCCCCCCCCCC -> DD -> EEE ->
FFFFF -> GGGG -> HHHHH

но я на самом деле хочу, чтобы это выглядело примерно так: 

      AAAA   ->   BBBBB  ->
CCCCCCCCCCCCCCCCCCC  -> DD -> EEE ->
   FFFFF ->  GGGG ->  HHHHH

если вы понимаете, о чем я.

Нужно ли использовать для этого таблицы, а не плавающие div?

Это было полезно?

Решение

просто пара других указателей. Вы не должны иметь пустых тегов li, что не является семантически правильным. Также в идеальном мире вы должны не давать имена макетов атрибутов идентификаторов .

Лично я бы поместил начальное изображение в ul, а затем поместил заключительное изображение в последний li.

Другие советы

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

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

Не трать свое время, просто иди сюда:

http://www.cssmenubuilder.com/build-breadcrumb-menu

Спасибо за оперативные ответы. Я попробую то, что вы предлагаете.

В настоящее время я пытаюсь сделать это с помощью списка, хотя я также не получил ничего с помощью 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). Однако это вызывает некоторые сложности при применении фоновых изображений.

Как бы мне не хотелось говорить, что ничего нельзя сделать, я думаю, что должен согласиться с @johnners относительно окружающего элемента для каждого уровня навигации. Даже если бы вы использовали CSS макета таблицы, вам понадобится какой-то окружающий элемент для каждой «строки», чтобы получить правильное расстояние слева и справа.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top