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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответы [ 6 ]

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

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

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

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

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

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

0 голосов
/ 09 декабря 2008

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

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

Установка элементов li для отображения: inline и присвоение ul свойства text-align: justify помогут вам частично продвинуться (по крайней мере, в FFX3 и IE7). Однако при применении фоновых изображений возникают некоторые сложности.

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

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

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

Я попытался вытащить некоторый 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>
0 голосов
/ 28 ноября 2008

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...