Question

我目前正在更新一个非常古老的网站（上次更新大约是2001年），并同意使用HTML5和CSS3。

对于一般设计，我正在使用非常干净的白色和灰色调样式，有许多填充和边距。我的问题在于主页：我想要一个以3列为中心的布局。但从哪里开始？我尝试了一些漂浮，但徒劳无功。

我这样做了吗？

HTML：

<div class="colwrapper">
    <div class="ltcol"></div>
    <div class="ctcol"></div>
    <div class="rtcol"></div>
</div>

CSS：

.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; }
.ltcol { float:left; }
.ctcol { margin-left:340px; }
.rtcol { float:right; }

Answer 1

你的CSS应该是这样的：

.ltcol, .ctcol { float:left; }
.rtcol { float:right; }

一般来说，CSS浮点属性的目的是向左或向右推送块级元素，将其从与其他块元素相关的流中取出。这允许自然流动的内容环绕浮动元素。这个概念类似于您在印刷文献中每天看到的内容，其中照片和其他图形元素在一侧对齐，而其他内容（通常是文本）自然地围绕左对齐元素或右对齐元素流动。

有关详细信息，您必须阅读此内容 article 。

参见本演示：http://jsfiddle.net/akhurshid/YRWLV/

Answer 2

您的HTML非常干净 - 这是向前迈出的一大步。

您需要为所有列添加float: left。要确保在列之后取消浮动，最好在浮动列之后添加clear div。

HTML：

<div class="colwrapper">
    <div class="ltcol">Column 1</div>
    <div class="ctcol">Column 2</div>
    <div class="rtcol">Column 3</div>
    <div class="clear"></div>
</div>

CSS：

.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; background-color: #efefef }
.ltcol { float:left; }
.ctcol { float:left; }
.rtcol { float:left; }
.clear { clear: left; }

Answer 3

因此，您为此问题添加了css3标记，因此我建议您使用css3列布局进行此操作：

More info

例如

<强> HTML

<div class="colwrapper">
    <div>text</div>
</div>

<强> CSS

.colwrapper div
{
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  column-count:3;
}

它不适用于IE。

Answer 4

使用其中一个经过验证的测试实现，而不是自己推出。除了您将获得经过测试和运行的代码之外，您还可以轻松地为您的网站添加响应能力。

还有更多，如果你google ..

Answer 5

现在也可以使用Flexbox属性，因此您不必担心浮动或clearfix。

  main{
  /* .colwrapper{ */
    display: flex;
    flex-flow: row;
    justify-content: center;
  }
  main > section{
  /* .ltcol,.ctcol,.rtcol{ */
    display:flex;
    flex-flow:column;
    align-items:center;
    padding:10px; padding:.625rem;
  }

  main > section:nth-child(2){
  /* .ctcol{ */
    margin:0 20px; margin:0 1.25rem;
  }

http://caniuse.com/flexbox表明对它的支持并不像您希望的那么多，但是，有一些方法可以通过将旧版本的语法与新的http://css-tricks.com/using-flexbox/混合来提高支持度如果你想在下一个项目中使用它，那么克里斯科伊尔就可以写出一篇很棒的文章（这篇文章相当陈旧）。您还可以在http://html5please.com/#flexbox

获取更多详细信息

另外，如果你正在使用HTML5，我可能会使用div的部分来获得更多的语义结构，所以比较看起来像这样：

<main>
  <section></section><!-- or <nav></nav> -->
  <section></section><!-- or <article></article> -->
  <section></section><!-- or <aside></aside> -->
</main>

instead of...

<div class="colwrapper">
  <div class="ltcol"></div>
  <div class="ctcol"></div>
  <div class="rtcol"></div>
</div>

Answer 6

尝试将rtcol div放在li lt col div之前。

  <div class="colwrapper">
    <div class="rtcol">X</div>
    <div class="ltcol">X</div>
    <div class="ctcol">X</div>
  </div>

http://jsfiddle.net/EDjpy/

一个干净的CSS3 3列布局，从哪里开始？

6 个答案: