Question

我的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％。不应该扩展所有内容以填充父元素吗？

感谢您的任何见解。

Answer 1

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

我相信这是您尝试做的事情：JSFiddle

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

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

流体布局问题

1 个答案: