Несколько строк с плавающими div-элементами CSS - PullRequest
Новая
       39

Несколько строк с плавающими div-элементами CSS

1 голос
/ 21 июля 2011

Я хотел бы реализовать такой дизайн, используя плавающие CSS-элементы: 

---------------
|Header       |
---------------
|Col1| Row1   |
|    |--------|
|    | Row2   |
---------------
| Footer      |
---------------

Я искал по всему, но не нашел простого способа сделать это.

Как мне этого добиться?

Спасибо.

РЕДАКТИРОВАТЬ: Я хочу уточнить мою проблему.Я хочу иметь два ряда изображений рядом с строкой меню слева.Я пытаюсь использовать float: left для макета изображения.

EDIT2: Решена проблема myslef с использованием display: inline-block для элементов изображения вместо float: left.

Ответы [ 3 ]

3 голосов
/ 21 июля 2011

Я бы начал с контейнера с шириной страницы.В этом примере мы скажем width:950px. Все странные значения ширины вызваны границами, поэтому, если вы удалите их, все значения ширины будут более обычными числами, такими как 400, 950, 350 и т. Д.пример: http://jsfiddle.net/edgBP/embedded/result/

<html>
<head>
<style type="text/css">
#maincontent {
    width:950px;
    height:100%;
    margin:0 auto;
}
#header {
    width:946px;
    height:150px;
    border:#000 solid;
    border-width:2px 2px 1px 2px;
}
#leftcolumn {
    width:395px;
    height:703px;
    border:#000 solid;
    border-width:1px 1px 1px 2px;
    float:left;
}
#toprow {
    width:549px;
    height:351px;
    border:#000 solid;
    border-width:1px 2px 1px 1px;
    float:left;
}
#bottomrow {
    width:549px;
    height:350px;
    border:#000 solid;
    border-width:1px 2px 1px 1px;
    float:left;
}
#footer {
    width:946px;
    height:150px;
    border:#000 solid;
    border-width:1px 2px 2px 2px;
    clear:both;
}
</style>
<body>
<div id="maincontent">
    <div id="header">Header Content</div>
    <div id="leftcolumn">Leftcolumn Content</div>
    <div id="toprow">Toprow Content</div>
    <div id="bottomrow">Bottomrow Content</div>
    <div id="footer">Footer Content</div>
</div>
</body>
</html>
2 голосов
/ 21 июля 2011

Вот простой пример того, как этого добиться, предполагая, что ваша основная ширина составляет 400 пикселей.

HTML: 

<div class='container'>

<div class='leftCol'>
.. your left col content ..
</div>

<div class='rightCol'>
<div>.. row 1 content ..</div>
<div>.. row 2 content ..</div>
</div>

</div>

CSS: 

.container {width:400px;float:left;}
.leftCol {width:200px; float:left;}
.rightCol {width:200px; float:right}
.rightCol div {float:left; clear:left;}
2 голосов
/ 21 июля 2011

Вам проще всего использовать фреймворк:

...