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

我正在努力实现一些我相信比我更容易的事情！

我正在使用Skeleton响应式框架，直到现在一直没有问题。

这是我想要实现的图表。

这将被放置在一列中。 一旦这些列缩小了，我想按照图中的第二个例子来堆叠div。 我已经尝试了几种不同的方法，但是一直搞错了。

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

Answer 1

你可以使用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 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> 

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

Answer 2

浮动div将帮助你想要实现的。

例

HTML

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

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; } 

放大页面以查看效果。

希望能帮助到你。

Answer 3

今天这种事情可以通过使用display:flex;

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

HTML：

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

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; } } 

Answer 4

使用基于min-width的媒体查询，您可以实现类似http://jsbin.com/aruyiq/1/edit的function

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; } } 

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

Answer 5

这样做：

HTML

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

CSS

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

这是工作jsfiddle 。 将孩子的width更改为200px ，他们将堆叠。