У меня есть три div, и я хочу, чтобы две боковые divs захватывали как пространство, которое требуется по их содержанию, а средний div - как можно шире. Это курс в одном ряду и с CSS.Вопрос CSS: средний блок, чтобы заполнить всю пустую область
Код что-то вроде:
<div class='wrapper'>
<div class='small'>Left/div>
<div class='big'>Big</div>
<div class='small'>Right</div>
</div>
Любые подсказки?
Посмотрите на The Perfect 3 Column Liquid Layout.
And here's one on Dynamic Drive.
И наконец, по историческим причинам, here's the A List Apart Holy Grail article.
Идеальный 3-слойный жидкий макет - хорошее место для начала. Вы также можете попробовать что-то подобное, что очень похоже на это.
<html>
<head>
<title></title>
<style type="text/css">
.small1 {
float: left;
width: 20%;
height:100%;
}
.small2 {
float: right;
width: 20%;
height: 100%;
}
.big {
width: 60%;
height: 100%;
margin-left: 20%;}
</style>
</head>
<body>
<div class='small1'>Small1</div>
<div class='small2'>Small2</div>
<div class='big'>Large</div>
</body>
</html>
Отредактировано из-за незначительной ошибки разметки.
вы также можете использовать несколько оберток (таким образом будет легче установить фон)
<head>
<style>
.wrapper{background-color:black;}
.wrapperLeft{float:left;background-color:blue;width:70%}
.small{float:left;width:20%;background-color:red;}
</style>
</head>
<body>
<div class='wrapper'>
<div class='wrapperLeft'>
<div class='small'>Left</div>
<div class='big'>Big</div>
</div>
<div class='small'>Right</div>
</div>
</body>
Посмотрите на эту статью ::: http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
Они хороши, но они основаны на прилипание ширины divs, как я вижу (по крайней мере, в persents, ems и т. д.). Я бы хотел избежать фиксации этих значений – glaz666