CSS: Positioning divs
how can I get my divs to layout out like the below pic.
-------------- -------------------
| | | Div2 |
| | -------------------
| Div1 | -------------------
| | | Div3 |
| | -------------------
| | ----------------开发者_StackOverflow---
| | | Div4 |
-------------- -------------------
Everything I've tried has div's 2,3,4 lining up horizontally to each other. I tried to do clear: left; (or both) but they just end up under div 1. Thanks for the help!
I'd most likely have a container div for the right side, with the three rows nested within it.
One of many possible solutions:
<html>
<head>
<style type="text/css">
#div1, #div2, #div3, #div4 {
border: 1px dashed #000;
width: 300px;
}
#div1 {
float: left;
}
#div2, #div3, #div4 {
margin-left : 300px;
}
</style>
</head>
<body>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
</body>
</html>
The border is there just to aid in seeing the divs.
Something like this will work, basicaly the approach is to simply position the elements where you need them, IMO this is an easy way to understand the base layout of your page. here you can see an example http://jsbin.com/izosi3/edit
<div id="leftnav" style="position:absolute; top:0px; left:0px; bottom:0px; width:150px;">
</div>
<div id="header" style="position:absolute; top:0px; left:150px; height:50px; right:0px;">
</div>
<div id="content" style="position:absolute; top:50px; left:150px; bottom:50px; right:0px;">
</div>
<div id="footer" style="position:absolute; height:50px; left:150px; bottom:0px; right:0px;">
</div>
How is that
Html
<div class="container">
<div class="big">biggy</div>
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
Css
.container{
width:400px;
overflow:hidden;
border:1px solid #ccc;
padding:10px 0px 0px 10px;
}
.big{
width:160px;
height:100px;
float:left;
background-color:#c55;
padding:5px;
}
.small{
width:180px;
height:20px;
float:left;
background-color:#5c5;
margin-bottom:10px;
margin-left:15px;
padding:5px;
}
demo: http://www.jsfiddle.net/gaby/em7yz/2/
You could do something like this. But you'll have to explicitly set the height of your DIV's.
<div style="width:600px;height:600px;border:1px solid red;">
<div style="float:left;width:300px;height:600px;border:1px solid green;">
<h1>Div 1</h1>
</div>
<div style="float:left;">
<div style="height:200px;width:298px;border:1px solid orange;"><h1>Div 2</h1></div>
<div style="height:200px;width:298px;border:1px solid blue;"><h1>Div 3</h1></div>
<div style="height:200px;width:298px;border:1px solid purple;"><h1>Div 4</h1></div>
</div>
<div style="clear:both;"></div>
</div>
加载中,请稍侯......
精彩评论