12 列响应式设计 - 文章和旁白格式不正确

Question

我正在尝试为响应式网站创建模板。

我的第一个问题是文章和旁白应该并排放置。我正在使用带行的 12 列系统，我将 Article 和 Aside 都分配给了 "col-6" 的 div class，这意味着它们应该各自占据宽度的 50%的容器。我不明白他们为什么这样做：

Article 和 Aside 应该几乎在中心相互接触。正如您将在代码中看到的，它们每个都在 div class "row" 中，因此它们应该在同一行中。我的第二个问题是，由于这是一个响应式网站，我需要文章和旁白在页面达到移动尺寸（600 像素及以下）时彼此重叠。但这并没有正确发生。

我不完全理解 12 列/媒体查询系统，所以这可能是问题的一部分。我正在使用 W3Schools 的教程：http://www.w3schools.com/css/css_rwd_mediaqueries.asp。我最困惑的是，当我们在 CSS 文件底部添加媒体查询时，它的样式 - 12 列 - 在页面到达之后应用600 像素。那么这不应该意味着一旦达到 600px，媒体查询之前的所有 CSS 都不会应用于页面吗？测试后，我可以看到样式仍然适用，但这是否意味着当页面小于 600px 时，我需要创建另一个具有 (min-width:0px) 和 12 列的媒体查询？否则，只有当页面达到 600px 时，12 列才适用，对吧？感谢您的帮助！

HTML:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>SASS Project</title>
<link href="styles.css" type="text/css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>

<body>
<div id="container"><!--container-->

<div class="row"><!--first row--> 
<header>  
    <div class="center">                        
       <h2>Header</h2>
    </div>
</header>
</div><!--end first row-->

<nav><!--Nav Bar-->
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    </ul>
</nav>


<div class="row"><!--second row-->
<div class="col-6">
<article><!--Article-->
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus 
vel tortor id est imperdiet fermentum. Sed in interdum justo. 
Cras feugiat scelerisque risus 
eu congue. Mauris semper sed neque in pulvinar. Morbi posuere ligula 
in aliquam feugiat. Aenean in lectus vel risus vestibulum molestie.
Donec mollis at odio 
id tempor.</p>
<img src="images/image1.jpg" id="image1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel
 tortor id est imperdiet fermentum. Sed in interdum justo. Cras feugiat
 scelerisque risus eu congue. Mauris semper sed neque in pulvinar. 
Morbi posuere ligula in aliquam 
feugiat. Aenean in lectus vel risus vestibulum molestie. Donec mollis
 at odio id tempor.</p>
</article>
</div>


<div class="col-6">
<aside><!--Aside-->
<h2>Aside</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel
 tortor id est imperdiet fermentum. Sed in interdum justo. Cras feugiat
 scelerisque risus 
eu congue. Mauris semper sed neque in pulvinar. Morbi posuere ligula in
 aliquam 
feugiat. Aenean in lectus vel risus vestibulum molestie. Donec mollis
 at odio 
id tempor.</p>
<img src="images/image2.jpg" id="image2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel
 tortor id est imperdiet fermentum. Sed in interdum justo. Cras feugiat
 scelerisque risus eu congue. Mauris semper sed neque in pulvinar.
 Morbi posuere ligula in aliquam feugiat. Aenean in lectus vel risus
 vestibulum molestie. Donec mollis at odio id tempor.</p>
</aside>
</div>
</div><!--end second row-->

<section><!--Section-->
<h2>Section</h2>
</section>

<div class="clearfix">
</div>

<!-- 3 column layout -->
<div class="content">
<h2>3 Column Layout</h2>

<div class="leftcol"> <h4>Content 1</h4>
</div><!--closes leftcol-->

<div class="rightcol"> <h4>Content 3</h4>
</div><!--closes rightcol-->

<div class="midcol"> <h4>Content 2</h4>
</div><!--closes midcol-->

</div>

<footer><!--Footer-->
<h2>Footer</h2>
</footer>

</div><!--closes container-->
</body><!--closes body-->

</html>

CSS:

html{overflow:scroll}/*for tablets and phones*/

*{box-sizing:border-box;}

.row:after{content:"";
       clear:both;
       display:block;}

[class*="col-"]{float:left;
            padding:10px;}


/*global styles*/
#container {height:auto;
            margin:auto;
            max-width:1000px;
            width:100%}

header {width:100%;
       height:40px;
       background-color:red;
       margin-bottom:15px;}

nav ul{list-style-type: none;
      margin: 0;
      padding: 0;
      text-decoration:none;
      text-align:center;
      margin-bottom:15px;}

nav ul li a{display:inline;
            margin-left:15px;
            text-decoration:none;}

nav ul li a:hover {text-decoration: underline;}

h2 {text-align:center;}

h4 {display: block;}

#image1 {float:left;
        height:160px;
        width:160px;}

#image2 {float:right;
        height:160px;
        width:160px;}

article{width:45%;
        margin-right:5%;
        float:left;
        height:600px;
        background-color:green;}

aside{width:45%;
      float:right;
      height:600px;
      background-color:green;}

.clearfix{clear:both;}


footer {width:100%;
       height:25px;
       background-color:red;
       margin-bottom:15px;
       clear:both;}

.content{width:auto;
         height:auto;
         clear:both;
         background-color:red;}   

.leftcol{width:30%;
         float:left;}

.midcol{width:30%;
        margin-left:35%;}

.rightcol{width:30%;
          float:right;}

/* For mobile phones: */
[class*="col-"] {
width: 100%;
}

@media only screen and (min-width: 600px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

nav ul li {display:inline;}
}

Answer 1

您的列大小设置为 col-6，即小屏幕的 50%。（以及所有其他屏幕，如果您未指定其他尺寸）但是您的 article 和 aside 元素设置为： width: 45% 。 .

因此，如果您希望它们适合 col-6 网格，则必须将其更改为 100% 我已经在 fiddle 中完成了： https://jsfiddle.net/x1u9o4b4/1/

    article{width:100%;
        margin-right:5%;
        float:left;
        height:600px;
        background-color:green;}

aside{width:100%;
      float:right;
      height:600px;
      background-color:green;}

现在，如果您希望 Aside 和 Article 保持纤细但仍然并排，则不应使用 col-sm-6 标签。我使用 col-4 为这个解决方案制作了另一个 fiddle： https://jsfiddle.net/x1u9o4b4/2/

article{width:100%;
        margin-right:5%;
        float:left;
        height:600px;
        background-color:green;}

aside{width:100%;
      float:right;
      height:600px;
      background-color:green;}

和

<div class="col-4">

edit 这是一个版本，在旁边溢出，文章设置为滚动：https://jsfiddle.net/x1u9o4b4/3/

12 列响应式设计 - 文章和旁白格式不正确

12 Column Responsive Design - Article and Aside Not Formatting Properly

html

css

multiple-columns

media-queries

responsive-design