12列响应式设计 - 文章和旁边没有正确格式化

时间：2016-02-20 00:34:32

标签： html css responsive-design media-queries multiple-columns

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

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

enter image description here

文章和旁边几乎应该在中心互相接触。正如您将在代码中看到的那样，它们都在div类“行”中，因此它们应该在同一行中。我的第二个问题是，由于这是一个响应式网站，因此当页面达到移动尺寸（600px及以下）时，我需要文章和旁边相互贴合。但这种情况并没有正确发生。

enter image description here

我不完全理解12列/媒体查询系统，因此这可能是问题的一部分。我正在使用W3Schools的这个教程：http://www.w3schools.com/css/css_rwd_mediaqueries.asp。我最困惑的是，当我们在CSS文件的底部添加媒体查询时，它的样式--12列 - 在页面达到600px后应用。那么这不应该意味着媒体查询之前的所有CSS一旦达到600px就不会应用于页面吗？经过测试，我可以看到样式仍然适用，但是这不应该意味着我需要创建另一个媒体查询（最小宽度：0px）和12列，当页面小于600px？否则，只有页面达到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;}
}

1 个答案:

答案 0 :(得分：2)

您的列大小设置为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/

相关问题
最新问题