流体布局问题答案

【问题标题】：Fluid Layout Issue流体布局问题
【发布时间】：2014-04-05 03:43:37
【问题描述】：

我的 HTML 文件是。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Fluid Layout</title>

    <link rel="stylesheet" href="styles.css">

</head>
<body>

 <div class="container">

     <div class="row">  

        <div class="columns four">four four four four four four four four four four four four four four four four four four four four four</div>

        <div class="columns four">four</div>

        <div class="columns four">four</div>

        <div class="columns four">four</div>

     </div><!--/row-->


    <div class="columns eight">eight</div>

    <div class="columns eight">eight</div>


    <div class="columns six">six</div>

    <div class="columns eight">eight</div>

    <div class="columns two">two</div>


    <div class="columns sixteen">sixteen</div>


 </div><!--/container-->

</body>
</html>

我的 CSS 文件是。

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

body {
    font: 12px/1.5em /* Notation: font-size / line height */ Helvetica, Arial, sans-serif;
    color: #313131;
}

.container {
    width: 90%;
    margin: 0 auto;
    background: rgba(115,150,209,0.67);
}

.row {
    width: 100%;
    float: left;
    clear: both;
}

.container .columns {
    float: left;
    background: tomato;
    margin: 0 0 1em;
    text-align: center;
    padding-right: 1em;
    padding-left: 1em;
}

.container .columns.one          {  width: 6.25%    }
.container .columns.two          {  width: 12.5%    }
.container .columns.three        {  width: 18.75%   }
.container .columns.four         {  width: 25%      }
.container .columns.five         {  width: 31.25%   }
.container .columns.six          {  width: 37.5%    }
.container .columns.seven        {  width: 43.75%   }
.container .columns.eight        {  width: 50%      }
.container .columns.nine         {  width: 56.25%   }
.container .columns.ten          {  width: 62.5%    }
.container .columns.eleven       {  width: 68.75%   }
.container .columns.twelve       {  width: 75%      }
.container .columns.thirteen     {  width: 81.25%   }
.container .columns.fourteen     {  width: 87.5%    }
.container .columns.fifteen      {  width: 93.75%   }
.container .columns.sixteen      {  width: 100%     }


.clearfix:after,
.container:after {
    content: '';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    clear: both;
}

.clearfix,
.container {
    zoom: 1;
}

出于某种原因，我需要指定具有行类的任何内容的宽度为 100%。不应该一切都扩展以填充父元素吗？

感谢您的任何见解。

【问题讨论】：

标签： html css css-float fluid-layout

【解决方案1】：

您的 div 宽度是绝对正确的。默认情况下，div 填充 100% 的宽度（并适应填充/边距），这是因为它们的默认 css 值display:block;。您不需要对 .row 类进行任何 CSS 更改。

我相信这就是你想要做的：JSFiddle

请注意，在使用此类特定宽度值时，div html 标记之间的空白非常重要。在我的示例中，我已经删除了 div 之间的所有空格（尽管它们可能并非都是必需的）。

就个人而言，我觉得有更有效的方法来实现这种效果——特别是对于响应式设计。如果有兴趣，请告诉我！

【讨论】：