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

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

3 голосов
/ 13 октября 2009

Я хотел бы иметь [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;
    }

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

Ответы [ 4 ]

4 голосов
/ 13 октября 2009

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

вот код 

<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>

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

0 голосов
/ 06 марта 2011

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

<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 голосов
/ 13 октября 2009
0 голосов
/ 13 октября 2009

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

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

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

...