На главную Наши проекты:
Журнал   ·   Discuz!ML   ·   Wiki   ·   DRKB   ·   Помощь проекту
ПРАВИЛА FAQ Помощь Участники Календарь Избранное RSS
msm.ru
Модераторы: Vasya2000, Serafim, fatalist
  
> вложенные div с float:left , или какой-то другой выход нужен
    Други, вот такая проблема... Есть div контейнер, в котором надо разместить горизонтально несколько других контейнеров. Внутри этих контейнеров, в свою очередь, должны размещаться еще контейнеры, тоже горизонтально. Думал, и у тех и у других делать float:left, но получается, что во внутренних контейнерах расположение блоков получается по вертикали. Пример

    Прикреплённый файлПрикреплённый файлbad2.png (5,84 Кбайт, скачиваний: 571)

    Если убираю во внешнем контейнере float:left, то во внутреннем все более менее встает по своим местам, но естессно блоки в нем оказываются друг под другом

    Прикреплённый файлПрикреплённый файлbad1.png (11,85 Кбайт, скачиваний: 518)

    код соответсвенно такой

    ExpandedWrap disabled
                  <div class="ribbonBands">
                      <div class="ribbonBand">
                          <div class="rbContent">
                              <div class="rbIcon"></div>
                              <div class="rbLayout">
                                  <div class="rbLayoutColumn">
                                      <a href="#">Some command here</a>
                                      <a href="#">Some another command</a>
                                      <a href="#">Yet another command</a>
                                  </div>
                                  <div class="rbLayoutColumn">
                                      <a href="#">Some command here</a>
                                      <span>Comandeer my ass <select><option>1234</option><option>1234</option><option>1234</option><option>1234</option></select></span>
                                      <span>Yet another command <input type="text" /></span>
                                  </div>
                              </div>
                          </div>
                          <div class="rbFooter">Band title</div>
                      </div>
                      <div class="ribbonBand">
                          <div class="rbContent">
                              <div class="rbIcon"></div>
                              <div class="rbLayout">
                                  <div class="rbLayoutColumn">
                                      <a href="#">Some command here</a>
                                      <a href="#">Some another command</a>
                                      <a href="#">Yet another command</a>
                                  </div>
                                  <div class="rbLayoutColumn">
                                      <a href="#">Some command here</a>
                                      <span>Comandeer my ass <select><option>1234</option><option>1234</option><option>1234</option><option>1234</option></select></span>
                                      <span>Yet another command <input type="text" /></span>
                                  </div>
                              </div>
                          </div>
                          <div class="rbFooter">Band title</div>
                      </div>
       
                  </div>
                  <div class="ribbonFooter"></div>


    ExpandedWrap disabled
      div.ribbonBand
      {
          float: left;
      }
       
      div.rbIcon
      {
          height: 32px;
          width: 32px;
          float: left;
      }
       
      div.rbLayoutColumn
      {
          float: left;
          margin-left: .5em;
      }
       
      div.rbLayoutColumn a, div.rbLayoutColumn span
      {
          display: block;
      }
       
      div.rbLayoutColumn a
      {
          padding: .2em .5em .2em 0;
      }
       
      div.rbFooter
      {
          clear: both;
          text-align: center;
      }
       
      div.ribbonFooter
      {
          clear: both;
      }


    Подскажите, как мне запилить нужный мне лэйаут? Щас это сделано все на куче вложенных таблиц, хочу от этого уйти

    Прикреплённый файлПрикреплённый файлgood.png (4,9 Кбайт, скачиваний: 575)
      Сделай кучей вложенных таблиц! :D

      Добавлено
      Вообще, если блоки размещаются по-вертикали, значит им не хватает ширины контейнера.

      Добавлено
      Обожди. А кто у тебя должен вставать по-горизонтали, но не встаёт? rbLayoutColumn или его дети (a, span)?

      Добавлено
      зы. Картинки не смотрел :tong:
        а inline-block вместо флоата не вариант?

        Если нет, то я за таблицы...
          Цитата fatalist @
          а inline-block вместо флоата не вариант?

          такое же поведение как с float: left
            Дык это, без задания фиксированной ширины у ribbonBand его так и будет сплющивать...

            Но я бы все-таки табличку каркасную сделал и гори оно все огнем... Все эти лейауты от лукавого, только времени куча на них уходит...
              Цитата fatalist @
              Дык это, без задания фиксированной ширины у ribbonBand его так и будет сплющивать...

              почему?

              кстати, ширина ribbonBand гораздо больше чем, чем ширина сплющенного контента
                Цитата Uncle_Bob @
                почему?
                потому что стремится к минимуму, на сколько я понимаю...

                последнее что приходит в голову: white-space:nowrap; но не уверен, что это вообще с блоками даже инлайновыми прокатит...
                Цитата Uncle_Bob @
                кстати, ширина ribbonBand гораздо больше чем, чем ширина сплющенного контента
                По первому скрину этого не видно...
                  Цитата fatalist @
                  По первому скрину этого не видно...

                  как раз по нему и видно

                  Добавлено
                  Цитата fatalist @
                  потому что стремится к минимуму, на сколько я понимаю...

                  вот этьо и идет в противоречие с размерами на первом скрине

                  кстати, в ИЕ9 выглядит пучком, в FF нет
                  Сообщение отредактировано: Uncle_Bob -
                    Цитата Uncle_Bob @
                    как раз по нему и видно
                    А, в этом смысле, я имел в виду, что он явно меньше, чем два столбца рядом...

                    Еще одну вещь не заметил сразу: ты в курсе, что clear:both плевал на вложенность блоков? он работает на все уровни сразу... именно поэтому я в одном проекте отказался от полностью блочной верстки... еще раз посмотрел скрины, возможно как раз в этом проблема, хотя я уже ни в чем не уверен...
                    Сообщение отредактировано: fatalist -
                      осталось послушать начальника транспортного цеха и забить на блочную верстку :)

                      Добавлено
                      Переделал частично разметку на ul/li, стало получше

                      Добавлено
                      у rbLayout не было float:left
                      0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)
                      0 пользователей:


                      Рейтинг@Mail.ru
                      [ Script execution time: 0,0380 ]   [ 17 queries used ]   [ Generated: 28.03.24, 23:33 GMT ]