Блог

Главная - Вопросы по программированию - 3-макет столбца динамической ширины без таблиц

3-макет столбца динамической ширины без таблиц

#css #layout #html

#css #макет #HTML

Вопрос:

Я безуспешно пытаюсь добиться следующего макета:

введите описание изображения здесь

Требования следующие:

  1. Все три столбца, красный, зеленый и синий, должны иметь динамическую ширину, то есть их ширина должна меняться в зависимости от их содержимого.
  2. Серый контейнер должен быть центрирован, а его ширина также должна быть динамической, в зависимости от содержимого трех столбцов.
  3. HTML-код для зеленого столбца должен быть перед двумя другими столбцами в исходном коде.

Это проще простого с использованием таблиц, за исключением третьего требования, но я просто не могу сделать это с помощью DIVs и CSS. Самое близкое, что я нашел, это «Идеальный жидкий макет с 3 столбцами (процентная ширина)«, но он имеет процентную ширину, что не соответствует тому, что мне нужно.

Комментарии:

1. Я предполагаю, что вы ставите центральную колонку первой по соображениям SEO. На самом деле, вам не нужно этого делать — поисковые системы достаточно умны, чтобы решить, что сканировать. Можете ли вы поместить то, что у вас сейчас есть, в JSFiddle ?

2. google бесплатные шаблоны css 3 макет столбца, есть немало, которые делают именно то, что вы хотите, вы можете перепроектировать базовую структуру из этого.

3. @JamWaffles, это не из соображений SEO, а из соображений AdSense. Объявления AdSense, которые появляются первыми в исходном коде, платят больше. Я хочу, чтобы в центральной колонке было самое высокооплачиваемое объявление. В настоящее время я использую макет из той ссылки, которую я опубликовал.

4. @Serdalis, я уже провел поиск, и лучшее, что я смог найти, это то, что указано в ссылке.

5. Почему макет ширины в процентах от MJT не соответствует вашим потребностям? Ширина колонок является гибкой.

Ответ №1:

В настоящее время это легко выполнимо с помощью flex-box.
Вот так. Все ваши 3 требования выполняются без единого использования свойств width или height . Все контейнеры подстраиваются под их содержимое.

 body {text-align:center; font: 16px arial}
wrap {display: inline-flex;  flex-direction: column; background: lightgrey;}
header {margin-bottom: 10px; background: white; }
footer {margin-top: 10px; background: white}
content {display: flex; flex-direction: row-reverse}
ctnr {display: flex;}
centerCol {margin: 0 10px; background: green}
rightCol {background: blue}
leftCol {background: red}
[pad] {padding: 10px; border: 1px solid black;}  
 <wrap pad>
<header pad>Header</header>
<content>
<ctnr>
<centerCol pad><br><br><br>Center column<br><br><br><br><br><br><br></centerCol>
<rightCol pad>Right</rightCol>
</ctnr>
<ctnr>
<leftCol pad>Left</leftCol>
</ctnr>
</content>
<footer pad>Footer</footer>
</wrap>

Ответ №2:

я нашел, как поместить центральный столбец первым в коде

http://jsfiddle.net/gamepreneur/bj6bU/

HTML

 <div class="main">
    <div class="right-float">
        <div class="green">
            green
        </div>
        <div class="blue">
            blue
        </div>
    </div>
    <div class="red">
        red
    </div>
</div>

css

 .right-float {
    float:right
}
.green {
    float:left;
}
.blue {
    float:right
}
.red {
    float:left;
}

Я просто не уверен, как сделать все остальное … плюс сейчас 12:40 вечера (в то время, когда я пишу это)