2 колонки макета (левая колонка фиксированной ширины, правая жидкость + прозрачный: оба)

Просто нужна помощь, так как я пытаюсь разобраться с этим целую вечность. Что мне нужно:

У меня есть макет с двумя столбцами, где левый столбец имеет фиксированную ширину 220 пикселей, а правый столбец имеет ширину жидкости.

Код:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>Fluid</title>
    <style type="text/css" media="screen">
        html, body { background: #ccc; }
        .wrap      { margin: 20px; padding: 20px; background: #fff; }
        .main      { margin-left: 220px; width: auto }
        .sidebar   { width: 200px; float: left; }
        .main,
        .sidebar   { background: #eee; min-height: 100px; }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="sidebar">This is the static sidebar</div>
        <div class="main">This is the main, and fluid div</div>
    </div>
</body>
</html>

Нет проблем вообще. Когда я использую синтаксис css clear: both в правом столбце, все содержимое после перемещается под левым столбцом. Это правильное поведение и ничего против.

Но я полагаю, что мне нужно использовать clear: так, чтобы он оставался только в контексте правого столбца (левый столбец не затрагивается и не перемещается внизу)

Есть ли какой-нибудь простой способ сохранить базовую концепцию дизайна страниц с плавающей точкой?

ОБНОВЛЕНИЕ: просмотрите эту ссылку, чтобы узнать, о чем я, поскольку это может немного сбивать с толку из моего описания. Ссылка: http://jsfiddle.net/k4L5K/1/

12 голосов | спросил Ondrej 23 J000000Saturday11 2011, 03:31:26

3 ответа


0

Вот ваш измененный CSS:

html, body {
    background: #ccc;
}

.wrap {
    margin: 20px;
    padding: 20px;
    padding-right:240px;
    background: #fff;
    overflow:hidden;
}

.main {
    margin: 0 -220px 0 auto;
    width: 100%;
    float:right;
}

.sidebar {
    width: 200px;
    float: left;
    height: 200px;
}

.main, .sidebar {
    background: #eee; min-height: 100px;
}

.clear { clear:both; }
span { background: yellow }

По сути, я изменил способ разметки, чтобы .main div находился справа. Для этого нам пришлось добавить 2 вещи:

  1. Заполнение 240px в .wrap div и
  2. Правое поле
    ---- +: = 3 =: + ----, равное -220px, для правильного выравнивания жидкой части страницы.

    Поскольку мы поместили

    ---- +: = 4 =: + ---- справа, .main теперь влияет только на содержимое внутри .main div, как вы хотите.

    Вы можете увидеть демонстрацию здесь: http://jsfiddle.net/6d2qF/1/

ответил Karl Nicoll 23 J000000Saturday11 2011, 04:29:06
0

Вопрос довольно старый, но вот еще одно решение, которое я нашел недавно.

Нам просто нужно сделать 2 вещи:

  1. Добавьте overflow: auto; в .main DIV
  2. Убедитесь, что оболочка сохраняет поток документов, добавив overflow: hidden; в .wrap div или добавление .clear div в качестве последнего дочернего элемента .wrap element

Вот обновленная скрипка: http://jsfiddle.net/k4L5K/89/

ответил dmitry k. 17 Maypm17 2017, 12:21:10
0

Попробуйте это:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>Fluid</title>
    <style type="text/css" media="screen">
        html, body { background: #ccc; }
        .wrap      { margin: 20px; padding: 20px; background: #fff; }
        .main      { margin-left: 220px; width: auto }
        .sidebar   { width: 200px; }
        .main,
        .sidebar   { background: #eee; min-height: 100px; float: left; }
        .clear {clear:both;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="sidebar">This is the static sidebar</div>
        <div class="main">This is the main, and fluid div</div>
        <div class="clear"></div>
    </div>
</body>
</html>
ответил FiveTools 23 J000000Saturday11 2011, 03:39:27

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132