Css - How should we make 3-6 column layouts with css without table?
How should we make 6 column layouts with css without tables and one layer above and one layer in buttom? (with floats ? i try without su开发者_如何学编程ccess)
Thanks
Here is a simple three-column layout with a header and a footer:
<!DOCTYPE html>
<html>
<head>
<title>Column Layout</title>
<style type="text/css">
.column {
width: 33%;
border: 1px solid gray;
float: left;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div class="column one">
Column 1
</div>
<div class="column two">
Column 2 I am the very model of a modern major general.
</div>
<div class="column three">
Column 3
</div>
<div id="footer">Footer</div>
</body>
</html>
By floating the columns they appear next to each other. By using clear: both for the footer it sits below the columns.
In recent browsers you can implement columns much more simply using CSS3 multi-column layout.
If you want to vary the number of columns from three to six depending on the available space, you could try using a media query. Like multi-column layout, media queries are a relatively new feature. If you want to achieve this in older browsers, you will need to use JavaScript (or use floats very creatively.)
For a more detailed discussion of cross-browser multi-column layouts, I highly recommend CSS Mastery: Advanced Web Standards Solutions. It is a great book.
What I tend to do is float all but one of my columns left and the final one right. I then apply a right margin to all of the columns except the final two. This is because the gutter between them is created by the difference in the float, but also gives different browsers a bit of leeway so the layout doesn't break.
As for the layer below (I guess you mean a footer) you use
clear: both;
For example if my page was 65em wide (I tend to work in ems), and I wanted 6 columns, I give all my columns a width of 10em, and I float columns 1-5 left and I float column 6 right. I then give columns 1-4 a right margin of 1em.
you should use "ul"/
<header></header>
<ul id="columner">
<li>
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="thr"></li>
<li class="fou"></li>
<li class="fiv"></li>
<li class="six"></li>
</ul>
</li>
<li>
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="thr"></li>
<li class="fou"></li>
<li class="fiv"></li>
<li class="six"></li>
</ul>
</li>
</ul>
<footer></footer>
Even easier than fighting with floats and clear floats and the like is going to a CSS layout framework like Blueprint (http://www.blueprintcss.org/) or 960 grids (http://960.gs/). If you've never been exposed before, they work by creating a virtual grid system on your page--to get something to be 6 columns, you'd divide the total number of grids on the screen (or on your container) by 6 and voila, perfect grids every time with no overlap and no bugs.
Even if you're well-versed in floats, there are some pretty crazy quirks that you can avoid altogether with a framework that already has the brain damage done. Bonus points to those frameworks with a CSS "reset" that essentially makes all browsers the "same".
try to use some generators online like this: http://csscreator.com/version2/pagelayout.php or this http://www.cssportal.com/layout-generator/
I've just tried this 6 colunm layout with css and it seems to work well - I have based this on a 960px wide template, but you can adjust the number to fill any size layout:
<title>6 column layout</title>
<style type="text/css">
.wrapper {
width: 960px;
height: 160px;
padding: 4px;
border: 1px solid gray;
float: left;
}
.column {
width: 150px;
height: 150px;
padding: 4px;
border: 1px solid gray;
float: left;
}
.rightcolumn {
width: 150px;
height: 150px;
border: 1px solid gray;
padding: 4px;
float: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="column one">
Column 1
</div>
<div class="column two">
Column 2 </div>
<div class="column three">
Column 3
</div>
<div class="column four">
Column 4
</div>
<div class="column five">
Column 5</div>
<div class="rightcolumn">
Column 6
</div>
</div>
</body>
</html
I tried this on the latest firefox and Safari, and I also tried it on a IE 7 Browser and it all worked well. I added a wrapper to the css because I didn't want the boxes to go under each other if somebody shrank their browser.
加载中,请稍侯......
精彩评论