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

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

12 голосов
/ 23 июля 2011

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

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

Код: 

    <!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: оба в правом столбце, все содержимое после перемещается под левым столбцом.Это правильное поведение и ничего против.

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

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

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

Ответы [ 3 ]

25 голосов
/ 23 июля 2011

Вот ваш измененный 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. Правое поле на .main делении -220px для правильного выравнивания жидкой части страницы.

Поскольку мы поместили .main div справа, clear: both; теперь влияет только на содержимое внутри .main div, как вы хотите.

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

0 голосов
/ 17 мая 2017

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

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

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

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

0 голосов
/ 23 июля 2011

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

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...