Best Way to do Columns in HTML/CSS

后端未结

关注

 7  868

I\'m looking for a way to display 3 columns of content. I\'ve found a way to display wrap-around columns, but I don\'t want that for this page. I\'m looking for a way to say

相关标签:

7条回答

走了就别回头了

2020-12-05 00:10

I would suggest you to either use <table> or CSS.

CSS is preferred for being more flexible. An example would be:

<!-- of course, you should move the inline CSS style to your stylesheet -->
<!-- main container, width = 70% of page, centered -->
<div id="contentBox" style="margin:0px auto; width:70%">

 <!-- columns divs, float left, no margin so there is no space between column, width=1/3 -->
    <div id="column1" style="float:left; margin:0; width:33%;">
     CONTENT
    </div>

    <div id="column2" style="float:left; margin:0;width:33%;">
     CONTENT
    </div>

    <div id="column3" style="float:left; margin:0;width:33%">
     CONTENT
    </div>
</div>

jsFiddle: http://jsfiddle.net/ndhqM/

Using float:left would make 3 columns stick to each other, coming in from left inside the centered div "content box".

0 讨论(0)

说谎

2020-12-05 00:11
You also have CSS Grid and CSS Flex, both can give you columns that keep their position and size ratios depending on screen size, and flex can also easily rearrange the columns if screen size is too small so they can maintain a minimum width nicely.

See these guides for full details:
- https://css-tricks.com/snippets/css/complete-guide-grid/
- https://css-tricks.com/snippets/css/a-guide-to-flexbox
Grid:
```
.container {
  display: grid | inline-grid;
}
```
Flex:
```
.container {
  display: flex | inline-flex;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

终归单人心

2020-12-05 00:15

If you want to do multiple (3+) columns here is a great snippet that works perfectly and validates as valid HTML5:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Multiple Colums</title>

        <!-- Styles -->
        <style>
            .flex-center {
                width: 100%;
                align-items: center;/*These two properties center vetically*/
                height: 100vh;/*These two properties center vetically*/
                display: flex;/*This is the attribute that separates into columns*/
                justify-content: center;
                text-align: center;
                position: relative;
            }
            .spaceOut {
                margin-left: 25px;
                margin-right: 25px;
            }
        </style>

    </head>
    <body>
        <section class="flex-center">
            <h4>Tableless Columns Example</h4><br />
            <div class="spaceOut">
                Column 1<br />
            </div>
            <div class="spaceOut">
                Column 2<br />
            </div>
            <div class="spaceOut">
                Column 3<br />
            </div>      
            <div class="spaceOut">
                Column 4<br />
            </div>
            <div class="spaceOut">
                Column 5<br />
            </div>
        </section>
    </body>
</html>

0 讨论(0)

萌比男神i

2020-12-05 00:20

Bootstrap. Check out their awesome grid system here.

Using Bootstrap, you could make three columns like this:

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>

0 讨论(0)

时光说笑

2020-12-05 00:24

You should probably consider using css3 for this though it does include the use of vendor prefixes.

I've knocked up a quick fiddle to demo but the crux is this.

<style>
.3col
{
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count:3;
    column-gap:10px;
}
</style>
<div class="3col">
<p>col1</p>
<p>col2</p>
<p>col3</p>
</div>

0 讨论(0)

忘掉有多难

2020-12-05 00:24

You might also try.

.col{
  float: left;
}
.col + .col{
  float: left;
  margin-left: 20px;
}

/* or */

.col:not(:nth-child(1)){
  float:left;
  margin-left: 20px;
}

<div class="row">
  <div class="col">column</div>
  <div class="col">column</div>
  <div class="col">column</div>
</div>

ref: http://codepen.io/co0kie/pen/gPKNWX?editors=1100

0 讨论(0)

1 2 下一页