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

Question

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

我的第一个问题是，Article和Aside应该并排放置。 我使用带有行的12列系统，并且将Article和Aside都分配给div类“ col-6”，这意味着它们各自应占容器宽度的50％。 我不明白他们为什么要这样做：

文章和旁边应几乎在中心相互接触。 正如您将在代码中看到的那样，它们每个都在div类“行”中，因此它们应该在同一行中。 我的第二个问题是，由于这是一个响应迅速的网站，因此当页面达到移动尺寸（600像素及以下）时，我需要文章和文章可以相互配合。 但这是不正确的。

我不完全了解12栏/媒体查询系统，因此这可能是问题的一部分。 我正在使用W3Schools的本教程： http : //www.w3schools.com/css/css_rwd_mediaqueries.asp 。 我最困惑的是，当我们在CSS文件的底部添加媒体查询时，它的样式-12列-在页面达到600px 后应用。 因此，这是否不意味着媒体查询之前的所有CSS一旦达到600px都不会应用于该页面？ 经过测试之后，我可以看到样式仍然适用，但这是否不意味着我需要为页面小于600px创建另一个带有（min-width：0px）和12列的媒体查询？ 否则，只有当页面达到600像素时，这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％。 （如果未指定其他尺寸，则显示所有其他屏幕），但文章和旁边的元素设置为：width：45％..

因此，如果您希望它们适合于col-6网格，则必须将其更改为100％，我已经在这里进行了摆弄： 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为该解决方案做了另一个提琴演奏： 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">

编辑这是一个版本，其中有多余的内容，文章设置为滚动： https : //jsfiddle.net/x1u9o4b4/3/

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-02-20 01:00:05

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-02-20 01:00:05

解决方案1
2 已采纳 2016-02-20 01:00:05