两个Divs彼此相邻，然后堆叠响应变化

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.

我正在使用Skeleton响应框架，并且一直很好。

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.

这将放在一列中。一旦列的大小减小，我希望它按照图中的第二个示例堆叠div。我尝试了几种不同的方法，但一直都是错的。

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

我是HTML / CSS的新手，所以任何帮助都表示赞赏！非常感谢！

5 个解决方案

#1

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

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

CSS

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

HTML

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

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

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

#2

Floating div's will help what your trying to achieve.

浮动div将有助于您实现的目标。

Example

例

HTML

HTML

<div class="container">
<div class="content1 content">
</div>
<div class="content2 content">
</div>
</div>

CSS

CSS

.container{
width:100%;
height:200px;
background-color:grey;
}
.content{
float:left;
height:30px;
}
.content1{
background-color:blue;
width:300px;
}
.content2{
width:200px;
background-color:green;
}

Zoom in the page to see the effects.

放大页面以查看效果。

Hope it helps.

希望能帮助到你。

#3

today this kind of thing can be done by using display:flex;

今天这种事情可以用display：flex;

https://jsfiddle.net/suunyz3e/1435/

https://jsfiddle.net/suunyz3e/1435/

html:

HTML：

  <div class="container flex-direction">
      <div class="div1">
        <span>Div One</span>
      </div>
      <div class="div2">
        <span>Div Two</span>
      </div>
  </div>

css:

CSS：

.container{
  display:inline-flex;
  flex-wrap:wrap;
  border:1px solid black;
}
.flex-direction{
  flex-direction:row;
}
.div1{
  border-right:1px solid black;
  background-color:#727272;
  width:165px;
  height:132px;
}

.div2{
  background-color:#fff;
  width:314px;
  height:132px;
}

span{
  font-size:16px;
    font-weight:bold;
    display: block;
    line-height: 132px;
    text-align: center;
}

@media screen and (max-width: 500px) {
  .flex-direction{
  flex-direction:column;
  }
.div1{
  width:202px;
  height:131px;
  border-right:none;
  border-bottom:1px solid black;
  }
  .div2{
    width:202px;
    height:107px;
  }
  .div2 span{
    line-height:107px;
  }

}

#4

With a mediaquery based on a min-width you could achieve something like http://jsbin.com/aruyiq/1/edit

使用基于最小宽度的媒体查询，您可以实现类似http://jsbin.com/aruyiq/1/edit的内容

CSS

CSS

.wrapper { 
  border : 2px dotted #ccc; padding: 2px; 
}

.wrapper div {
   width: 100%; 
   min-height: 200px;
   padding: 10px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
#one { background-color: gray; }
#two { background-color: white; }

@media screen and (min-width: 600px) {
   .wrapper {
      height: auto; overflow: hidden; // clearing 
   }
   #one { width: 200px; float: left; }
   #two { margin-left: 200px; }
}

In my example the breakpoint is 600px but you could adapt it to your needs.

在我的例子中，断点是600px，但你可以根据自己的需要调整它。

#5

Do like this:

这样做：

HTML

HTML

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

CSS

CSS

.parent{
    width: 400px;
    background: red;
}
.child{
    float: left;
    width:200px;
    background:green;
    height: 100px;
}

This is working jsfiddle. Change child width to more then 200px and they will stack.

这是工作jsfiddle。将子宽度更改为200px以上它们将堆叠。