11

我目前正在更新一个相当旧的网站（最后一次更新是在 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; }
4

6 回答 6

9

你的CSS应该是这样的：

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

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

有关更多详细信息，您必须阅读这篇有趣的文章。

看这个演示：http: //jsfiddle.net/akhurshid/YRWLV/

于 2012-07-12T11:52:05.233 回答
3

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

您需要将 a 添加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; }

​</p>

于 2012-07-12T11:56:20.020 回答
3

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

更多信息

例如

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。

于 2012-07-12T11:58:28.043 回答
3

使用这些久经考验的实现之一，而不是推出您自己的。除了您将获得测试和工作代码这一事实之外，您还将以几乎零的努力为您的网站添加响应能力。

如果你用谷歌搜索还有更多..

于 2012-07-12T11:59:05.103 回答
3

现在也可以为此使用 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/如果你想在下一个项目中使用它，Chris Coyier 有一篇很棒的文章（这篇文章已经相当老了）。您还可以在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>
于 2013-11-16T19:16:49.873 回答
0

只需尝试将 rtcol div 放在 le ltcol div 之前。

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

http://jsfiddle.net/EDjpy/

于 2012-07-12T11:54:16.310 回答