Ответ 1
Одна из сложных вещей в современном веб-дизайне заключается в создании двух (или более) раскладок столбцов, где все столбцы имеют равную высоту. Я отправился на поиски, чтобы найти способ сделать это в чистом CSS.
Вы можете легко выполнить это, используя фоновое изображение в wrap-div, которое содержит оба ваших столбца (или фон страницы).
Вы также можете сделать это, используя ячейки таблицы CSS, но, к сожалению, поддержка браузера для этого по-прежнему остается теневой, поэтому это не предпочтительное решение. Читайте дальше, есть лучший способ.
Я нашел свое вдохновение на двух страницах в Интернете, хотя я предпочитаю свое решение, так как он дает мне больше свободы использовать закругленные углы и точные ширины или процентные макеты, и его легче редактировать, ваш окончательный макет холдинга div не заставляя вас делать отрицательный хруст.
== Трюк: ==
Сначала вы создаете колоды фонового дизайна, а затем добавляете полный div, который может содержать ваш обычный контент. Фокус в том, что все столбцы размещены в столбцах, создавая эффект push во всех родительских столбцах, когда контент распространяется по длине, независимо от того, какой конечный столбец является самым длинным.
В этом примере я буду использовать сетку с двумя столбцами в центрированном wrap-div с закругленными углами. Я попытался сохранить пух для облегчения копирования.
== Шаг 1 ==
Создайте свою основную веб-страницу.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
== Шаг 2 ==
Создайте один плавающий div внутри другого плавающего div. Затем примените отрицательный запас на внутреннем div, чтобы визуально отобразить его из рамки. Я добавил пунктирные границы для иллюстрации целей. Знайте, что если вы плаваете по внешнему div слева и даете внутреннему div отрицательное поле слева, внутренний div будет находиться под краем страницы, не предоставляя вам полосу прокрутки.
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
border: 3px dotted gold; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
this content obviously only fits the left column for now.
</div>
</div>
</body>
</html>
== Шаг 3 ==
Внутри div: создайте div без фона, в котором есть все из всех столбцов. Он будет проталкивать край внутреннего div. Я добавил пунктирную границу для иллюстрации целей. Это будет холст для вашего контента.
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
border: 3px dotted gold; /*temporary css*/
}
#overbothsides{
float:left;
width:400px;
border: 3px dotted black; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
this content spans over both columns now.
</div>
</div>
</div>
</body>
</html>
== Шаг 4 ==
Добавьте свой контент. В этом примере я помещаю два div, которые расположены над макетом. Я также убрал пунктирные границы. Престо, что он. Вы можете использовать этот код, если хотите.
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
}
#overbothsides{
float:left;
width:400px;
}
#leftcol{
float:left;
width:80px;
padding: 10px;
}
#rightcol{
float:left;
width:280px;
padding: 10px;
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
<div id="leftcol">left column content</div>
<div id="rightcol">right column content</div>
</div>
</div>
</div>
</body>
</html>
== Шаг 5 ==
Чтобы сделать его более приятным, вы можете сосредоточить весь дизайн в оберточном div и дать ему закругленные углы. Округлые углы не будут отображаться в старом IE, если вы не используете для этого специальное исправление.
<!DOCTYPE HTML>
<html>
<head>
<style>
#wrap{
position:relative;
width:500px;
margin:20px auto;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
}
#rightsideBG{
float:right;
background:silver;
width:300px;
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
}
#overbothsides{
float:left;
width:400px;
}
#leftcol{
float:left;
width:80px;
padding: 10px;
}
#rightcol{
float:left;
width:280px;
padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
<div id="leftcol">left column content</div>
<div id="rightcol">right column content</div>
</div>
</div>
</div>
</div>
</body>
</html>
== Источники вдохновения ==