3 column layout
Here is what I'm trying to do.
I want layout with three columns开发者_如何学Go. Lets call them left, middle and right column. I can't figure out what to do so when the content of main increase the height of left and right columns to increase also ?
I'd suggest checking out this link for a great example of a 3 column liquid layout. Just view the source for the example of the HTML and CSS. He also provides examples of various other layouts (see the tabs at the top of the page).
Here is an excellent website: http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts that has a whole bunch of different layouts that are all CSS based.
HTML:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3 Columns</title>
</head>
<body>
<div class="container">
<div class="left">
<h3>Left Column</h3>
</div>
<div class="center">
<h3>Center column</h3>
/div>
<div class="right">
<h3>Right column</h3>
</div>
</div> <!-- /container -->
</body>
</html>
CSS:
.container {width: 800px; border:1px solid red; overflow:auto; }
.left {width: 250px; border:1px dashed green; float:left}
.center {width: 250px; border:1px dashed green; float:left}
.right {width: 250px; border:1px dashed green; float:left}
See the demo here: http://jsfiddle.net/z2SLL/1/
I would strongly recommend against using the <table> element simply because for semantic reasons, we are not talking about displaying tabulated data.
Instead, exploit the display properties using values like "table", "table-row" and "table-cell". Here is a demo: http://jsfiddle.net/teddyrised/DLaCW/20/. You can see that although the content of each column varies, their overall height follows that of the tallest <div>.
Maybe the faux columns technique is what you need. Check it out here, here and here.
If you need it to be liquid or with no images (for whatever reason) then you might have to use some javascript like this example or you can check this weird example.
Anyway, with the little information there's not too much to offer because there's a lot of variables and different solutions.
加载中,请稍侯......
精彩评论