CSS-макет с 4 колонками - Fluid

Question

Я хожу по кругу, пытаясь понять это.

HTML / CSS:

<style type='text/css'>

#content {
    padding: 20px;
    background: #F3F6F7;
}

.inner-box {
    background: #fff;
}

.inner-box .col {
    background:#eee;
    display:block;
    float:left;
    margin:1%;
    padding:20px;
    width:23%;
}

</style>

<div id="content">      
    <div class="inner-box clearfix">
        <div class="col col-1">
            COl1
        </div>
        <div class="col col-2">
            COl2
        </div>
        <div class="col col-3">
            COl3
        </div>
        <div class="col col-4">
          COl4
        </div>

    </div>              
</div>    

Я в основном хочу, чтобы макет с 4 колонками с одинаковым битом заполнения вокруг каждого столбцавсе это на 100%.

Приведенный выше код работает, но как только я масштабирую браузер, 4-й столбец справа сместится вниз под остальными.

Answer 1

Лично я отказался от использования поплавков. Я нахожу их слишком темпераментными, чтобы с ними работать.

Теперь я использую display: inline-block; вместо поплавков. Обратите внимание, что IE7 и ниже не поддерживают это, но есть исключительный взлом CSS, который отлично работает. Используйте условные комментарии и отдельный файл CSS для IE7 и ниже.

* Кросс-браузерный хакер Inline-Block отлично подходит для решения этой проблемы.

Для всех моих проектов я определяю класс inline-block.

.inline-block
{
    display: inline-block;
}

и в файле IE CSS у меня есть:

.inline-block
{
    zoom: 1;
    *display: inline;
}

Затем вы можете легко расположить макеты любой жидкости, разместив элементы div рядом друг с другом и установив процентную ширину для каждого. Я обычно определяю класс, который обозначает фиксированную ширину в процентах

.twenty-five-perc
{
    width: 25%;
}

Таким образом, ваш полученный HTML может выглядеть так:

<div>
    <div class="inline-block twenty-five-perc">
    </div><div class="inline-block twenty-five-perc">
    </div><div class="inline-block twenty-five-perc">
    </div><div class="inline-block twenty-five-perc">
    </div>
</div>

Теперь вы можете задаться вопросом, почему у меня открывающие теги div на той же строке, что и предыдущий закрывающий тег. Это потому, что inline-block учитывает пробелы, и это нарушит компоновку. Подробнее об этой проблеме и способах ее устранения вы можете прочитать здесь: http://www.lifeathighroad.com/web-development/css-web-development/inline-block-whitespace-workaround/

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

Answer 2

Несколько мыслей.

Во-первых, вам не нужен clearfix div.Использование overflow:hidden на #content - лучший способ справиться с этим.Итак, ваш HTML выглядит так:

<div id="content">      
    <div class="col col-1">
        COl1
    </div>
    <div class="col col-2">
        COl2
    </div>
    <div class="col col-3">
        COl3
    </div>
    <div class="col col-4">
      COl4
    </div>             
</div>

Это чище.Во-вторых, div s являются элементами уровня блока, поэтому display:block; не требуется.

Кроме того, если вы не используете гибкие единицы для своих желобов, вы столкнетесь с проблемой, когда область просмотра станет меньше, чем ваша.проценты столбца позволяют.Я бы предложил использовать проценты для желобов.Помните, что проценты - это проценты по отношению к родительскому элементу, поэтому .col будет в процентах от #content.

Поскольку вы используете числа с плавающей запятой и каждый столбец имеет свой собственный доступный класс, его легко добавитьжелоб в качестве правого поля и установите на последнем 0.

Так что не только ваша разметка проще, но и CSS:

content {
  padding: 20px;
  background: #F3F6F7;
  overflow:hidden;
  }
.col {
  background:#eee;
  float:left;
  width:22%;
  margin-right: 4%;
  }
.col-4 {margin-right:0;}

Также обратите внимание, как(22% * 4) + (4% * 3) = 100%.

Надеюсь, это поможет.См. http://jsfiddle.net/D759g/ для рабочего примера.

Answer 3

Я бы использовал абсолютное позиционирование в этом макете.На мой взгляд самое надежное решение.Кроме того, вы можете изменить отступы, не нарушая макет.Кроме того, вы можете добавить границы и поля, без проблем.

/* assuming your html is under the body tag */
html, body, #content, .inner-box { margin: 0px; height: 100%; }

.inner-box { position: relative; }

.col {
  position: absolute;
  top: 0px; bottom: 0px;
  padding: 1%;
  border: 1px solid black;
}

.col-1 { left: 0%; right: 75%; }

.col-2 { left: 25%; right: 50%; }

.col-3 { left: 50%; right: 25%; }

.col-4 { left: 75%; right: 0%; }

обратите внимание, что значение left столбца и значение right предыдущего столбца всегда составляют до 100%

ПРИМЕЧАНИЕ: это не работает в ie6.

Answer 4

Вот самый простой способ составить список из 2, 3 или 4 столбцов.Просто настройте проценты, чтобы они равнялись 99% страницы (или 100 в этом случае).

<font size="4"><font color="maroon"><b>TITLE</b></font>  <font size="2"><div style="width: 25%; float: left;">
 <ul>
 <li>Left Item 1</li>
 <li>Left Item 2</li>
 <li>Left Item 3</li>
 <li>Left Item 4</li>
 <li>Left Item 5</li>
 </ul>
 </div>
 <div style="width: 25%; float: left;">
 <ul>
 <li>Left Item 1</li>
 <li>Left Item 2</li>
 <li>Left Item 3</li>
 <li>Left Item 4</li>
 <li>Left Item 5</li>
 </ul>
 </div>
 <div style="width: 25%; float: right;">
 <ul>
 <li>Right Item 1</li>
 <li>Right Item 2</li>
 <li>Right Item 3</li>
 <li>Right Item 4</li>
 <li>Right Item 5</li>
 </ul>
 </div> <div style="width: 25%; float: right;">
 <ul>
 <li>Right Item 1</li>
 <li>Right Item 2</li>
 <li>Right Item 3</li>
 <li>Right Item 4</li>
 <li>Right Item 5</li>
 </ul>
 </div></font></font>

Answer 5

Наличие некоторых значений в качестве фиксированных пикселей вызовет у вас проблемы.

Убедитесь, что все ваши отступы, поля и содержимое в сумме равны 99% - я обнаружил, что Mozilla испытывает проблемы, когда все значения равны 100%.

  <style type='text/css'>

    #content {
        padding: 1%;
        background: #F3F6F7;
    }

    .inner-box {
        background: #fff;
    }

    .inner-box .col {
        background:#eee;
        display:block;
        float:left;
        margin:1%;
        padding:1%;
        width:21%;
    }

    </style>

Answer 6

Я бы попробовал что-то чуть менее 23%: границы элемента DOM, отступы, поля и т. Д. Добавляются к ширине элемента, а не становятся частью ширины.Я предполагаю, что вы масштабируете браузер вниз, который масштабирует проценты, но не фиксированные отступы пикселей, и так далее, что означает, что есть больше отступов относительно внутренней ширины, делая столбцы слишком большими для ширины 100%.

Надеюсь, это поможет,

Джеймс