发表新帖
发表新帖

CSS: Vertical column layout without
后端 未结
关注
3 405
终归单人心
终归单人心 2021-01-13 15:36

Ok, I leaned html & css back in 2001. I was used to do something like this (To create a website with a \"vertical-column\" layout):
相关标签:
3条回答
  • 没有蜡笔的小新
    2021-01-13 16:13

    Below is a basic grid I cobbled together you can use with any size website. You'll need to clear the floats on the columns with either overflow hidden or a clearfix. If your project doesn't need to support IE7 you can use box-sizing border-box to add padding to your columns, otherwise add an extra element inside each column for padding.

    Whilst I can appreciate that making columns was super easy with tables that was pretty much the only thing they were better for layout wise.

    HTML:

    <!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <header></header>

    <div class="content grid">
        <div id="col1" class="col s1of3"></div>
        <div id="col2" class="col s1of3"></div>
        <div id="col3" class="col s1of3"></div>
    </div>

    <footer></footer>

</body>
</html>

    CSS:

    .grid {
}
    .grid .col { float: left; }

    .grid .col.s1of1 { width: 100%; }
    .grid .col.s1of2 { width: 50%; }
    .grid .col.s1of3 { width: 33.33333333%; }
    .grid .col.s2of3 { width: 66.66666666%; }
    .grid .col.s1of4 { width: 25%; }
    .grid .col.s3of4 { width: 75%; }
    .grid .col.s1of5 { width: 20%; }
    .grid .col.s2of5 { width: 40%; }
    .grid .col.s3of5 { width: 60%; }
    .grid .col.s4of5 { width: 80%; }
    0 讨论(0)
  • [愿得一人]
    2021-01-13 16:16

    CSS3 has some neat column layout options, but they're not very good compatability-wise, and a fair number of the options aren't supported by a large number of browsers.

    If you're seeking to make columns of variable/fixed width, then this is probably the article you're looking for:

    http://www.alistapart.com/articles/holygrail

    Using this method, you can set one or more divs to a fixed width, while having another resize appropriately to fill the page.

    If you just want all your columns to resize, then just make them all float: left, and width: {percentage of page}%

    0 讨论(0)
  • 情话喂你
    2021-01-13 16:19 
    HOW?

    Option 1: Google 'CSS 3 column layout'. This is has been well covered over the past 6 years or so and there's gobs of tutorials out there.

    Option 2: Google 'CSS Framework' and pick one to build your layout. 960.gs is a popular one. 

    WHY?

    Ideally, you'd use tables for tabular data and css to layout the rest of the page. Why? Well, in theory, CSS gives you a lot more flexibility. The best example is probably when it comes to responsive web design. On an iPhone, I may want 2 columns. On my iPad, I may want 4 columns. That can all be done with CSS, but gets really complicated if you hard-wire the HTML using tables.

    0 讨论(0)
 看不清?
提交回复
热议问题