CSS：div不堆叠

pocketgrid的工作方式是，当我将浏览器的大小减小到移动设备的大小时，“三十块”类应当堆叠在“七十块”类之上。但是这没有发生。我哪里错了？

这是我的HTML是什么样子：

<div class="wrapper block-group"> 

    <div class="top-bar block"> 
    <p>Some text</p> 
    </div> 

    <div class="header block-group"> 
    <div class="focus-area block-group"> 
     <div class="logo thirty-block block"> 
     <p><span class="text-logo">LoremLOGO</span></p> 
     <p><span class = "tagline">Lorem ipsum dolor sit amet</span></p> 
     </div>  
     <div class="seventy-block block"> 
     <p>test</p> 
     </div> 
    </div> <!-End focus-area --> 
    </div> <!-End header--> 

</div> <!-End wrapper-->

这是我的CSS是什么样子：

/*! PocketGrid 1.1.0 
* Copyright 2013 Arnaud Leray 
* MIT License 
*/ 
/* Border-box-sizing */ 
.block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

/* Clearfix */ 
.block-group { 
    *zoom: 1; 
} 
.block-group:before, .block-group:after { 
    display: table; 
    content: ""; 
    line-height: 0; 
} 
.block-group:after { 
    clear: both; 
} 

.block-group { 
    /* ul/li compatibility */ 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 

/* Nested grid */ 
.block-group > .block-group { 
    clear: none; 
    float: left; 
    margin: 0 !important; 
} 

/* Default block */ 
.block { 
    float: left; 
    width: 100%; 
} 

.header{ 
    width: 100%; 
} 

.focus-area { 
    width: 100%; 
} 

.thirty-block { 
    width: 30%; 
    background-color: green; 
} 
.seventy-block { 
    width: 70%; 
    height: 100px; 
    background-color: blue; 
}

来源

2014-10-07 Ashish Sharma

在上面的CSS中没有媒体查询为您的块？ – Pete 2014-10-07 07:50:37

感谢皮特指出。我看了一下pocketgrid提供的例子 - > http://jsfiddle.net/Ltydw83L/现在它可以工作了！ :) – 2014-10-07 08:13:34

看来你已经整理，但只是为进一步的和将来的帮助其他任何与此查询或媒体查询类似问题的人都会看到一个显示类似导航的示例，其中包含移动媒体查询更改。

http://jsfiddle.net/vmggcv0g/

使用下面的查询来改变移动列表项的状态（当屏幕小于480像素）：

@media only screen and (max-width : 480px)

与盒集束性以及允许填充和边框在列表项（含出这个属性的项宽度将超过100％的宽度，因为它会包括1px宽的边框）：

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

他再是一个伟大的CSS-技巧的文章，解释箱集束性和CSS盒模型进一步：

http://css-tricks.com/box-sizing/

来源

2014-10-07 09:46:26 JRW

我忽略默认PocketGrid规则，只考虑您的自定义代码：

以下规则无用，因为PocketGrid有一个Mobile First approach，所以这是默认行为。

.header{ 
    width: 100%; 
} 

.focus-area { 
    width: 100%; 
}

考虑，你将30-70只的比例上述移动断点，你应该包括他们如同特定媒体的查询：

@media only screen and (min-width : 480px) 
{ 
    .thirty-block { 
    width: 30%; 
    background-color: green; 
    } 
    .seventy-block { 
    width: 70%; 
    height: 100px; 
    background-color: blue; 
    } 
}

在下面宽屏幕480像素，每一个项目堆叠，在它上面，你将有30-70列并排

来源

2015-02-02 15:06:00

CSS：div不堆叠

回答

相关问题