Fixed - Liquid - Фиксированный макет

Я хотел бы иметь [Fixed] [Liquid] [Fixed] кросс-браузер-совместимый макет.

HTML:

body
  div#col-1
  div#col-2
  div#col-3

CSS:

    #col-1 {
    width:150px;
    float:left;
    }
    #col-2 {
    width:100%;
    padding:0 150x;
    }
    #col-3 {
    positon:absolute:
    right:0;
    width:150px;
    }

Будет ли это работать / лучший способ сделать это?

13.10.2009 07:50:29
4 ОТВЕТА

проверить это: http://siteroller.net/articles/3-column-no-tables-no-floats

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

И если будет какой-то интерес, я буду расширять то, что там написано.

0
13.10.2009 07:51:56
Это то, что я хочу: siteroller.net/articles/3-caolumn-no-tables-no-floats/… но ссылка не работает!
eozzy 13.10.2009 07:53:58
РЕШЕНИЕ
0
13.10.2009 07:55:35
По крайней мере, пока вы не сыт по горло поплавками. Удачи.
SamGoody 13.10.2009 08:00:25

Это довольно просто.

вот код

<html>
<head>
<style type="text/css">
#left {
  float: left;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#right {
  float: right;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#center {
  /* margin with 10px margin between the blocks*/
  margin: 0 160px;
  border: 1px solid black;
  height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>

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

вот пример с нижним колонтитулом

<html>
<head>
<style type="text/css">
#left {
  float: left;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#right {
  float: right;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#center {
  /* margin with 10px margin between the blocks*/
  margin: 0 160px;
  border: 1px solid black;
  height: 50px;
}
#footer {
  clear: both;
  margin-top: 10px;
  border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>

Вуаля! У вас есть ваш жидкий макет.

4
13.10.2009 10:39:19

Мне нравится ответ Роберта. Я также добавил бы обертку вокруг левого, правого, центрального и нижнего колонтитула. Здесь я установил идентификатор на «страницу»:

<body> 
    <div id="page"> 
        <div id="left">Text</div> 
        <div id="right">Text</div> 
        <div id="center">Text</div> 
        <div id="footer">footer</div> 
    </div>
</body> 

Затем вы также можете добавить стиль для «страницы»:

    #page {   
    min-width: 600px;   
    } 

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

0
6.03.2011 08:49:28