两个Div彼此相邻，然后堆叠响应变化 [英] Two Divs next to each other, that then stack with responsive change

问题描述

我使用Skeleton响应框架，并且已经很好了

这里是我想要实现的图表。

这将放在一个列中。一旦该列的大小减小，我想它按照图中的第二个示例堆栈div。我尝试了几种不同的方法，但仍然得到错误。

我对HTML / CSS很新，所以任何帮助是赞赏！非常感谢！

解决方案

您可以使用CSS3 媒体查询这样写：

CSS

  .wrapper {
 border：2px solid＃000; 
 overflow：hidden; 
} 
 
 .wrapper div {
 min-height：200px; 
 padding：10px; 
} 
 #one {
 background-color：gray; 
 float：left; 
 margin-right：20px; 
 width：140px; 
 border-right：2px solid＃000; 
} 
 #two {
 background-color：white; 
 overflow：hidden; 
 margin：10px; 
 border：2px dotted #ccc; 
 min-height：170px; 
} 
 
 @media屏幕和（max-width：400px）{
 #one {
 float：none; 
 margin-right：0; 
 width：auto; 
 border：0; 
 border-bottom：2px solid＃000; 
} 
} 
  

HTML

 < div class =wrapper> 
< div id =one>一< / div> 
< div id =two>两个< / div> 
< / div> 
  

检查此更多 http://jsfiddle.net/cUCvY/1/

I'm trying to achieve something that I am sure should be easier than I am making it!

I am using the Skeleton responsive framework, and have been fine up until now.

Here is a diagram of what I want to achieve.

This will be placed within a column. Once that columns reduces in size, I would like it to stack the divs as per the second example in the diagram. I've tried a few different ways, but keep getting it wrong.

I am pretty new to HTML/CSS so any help is appreciated! Many thanks!

解决方案

You can use CSS3 media query for this. Write like this:

CSS

.wrapper { 
  border : 2px solid #000; 
  overflow:hidden;
}

.wrapper div {
   min-height: 200px;
   padding: 10px;
}
#one {
  background-color: gray;
  float:left; 
  margin-right:20px;
  width:140px;
  border-right:2px solid #000;
}
#two { 
  background-color: white;
  overflow:hidden;
  margin:10px;
  border:2px dashed #ccc;
  min-height:170px;
}

@media screen and (max-width: 400px) {
   #one { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
    border-bottom:2px solid #000;    
  }
}

HTML

<div class="wrapper">
    <div id="one">one</div>
    <div id="two">two</div>
</div>

Check this for more http://jsfiddle.net/cUCvY/1/

这篇关于两个Div彼此相邻，然后堆叠响应变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！