All geek questions in one place

Css - How do we make 3-6 column layouts using css without a table?

How do we make 6 column layouts using css without tables and one layer above and one layer in buttom? (with floats? I try without success)

thank

+3
source share
6 answers

Here is a simple three-column layout with a header and 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>

In flowing columns, they appear next to each other. Using clear: bothfor the footer, it is below the columns.

In recent browsers, you can use columns much easier using the CSS3 multi- column layout .

, . , - . , JavaScript ( ).

CSS Mastery: -. .

+4

, , - , , . , . , , , .

( , ),

clear: both;

, 65 ( ems), 6 , 10em, 1-5 , 6 , 1-4 1em.

+2

, .., CSS, Blueprint (http://www.blueprintcss.org/) 960 (http://960.gs/). , , - -, 6 , ( ) 6 , .

, , , , . CSS "reset", "".

+2

"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>
+2

6 colunm css, , , - 960 , , :

<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

Firefox Safari, IE 7, . css, , , - .

0

Source: https://habr.com/ru/post/1752845/

More articles:


All Articles