Html 两个相邻的 Div，然后堆叠响应变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14436800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two Divs next to each other, that then stack with responsive change
提问by shorn
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 还很陌生，所以非常感谢您的帮助！非常感谢！
回答by sandeep
You can use CSS3 media queryfor 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/
回答by omer
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;
}
}
回答by Vivek Chandra
Floating div's will help what your trying to achieve.
浮动 div 将帮助您实现目标。
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.
希望能帮助到你。
回答by Fabrizio Calderan
With a mediaquery based on a min-widthyou could achieve something like http://jsbin.com/aruyiq/1/edit
使用基于 a 的媒体查询，min-width您可以实现类似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 600pxbut you could adapt it to your needs.
在我的示例中，断点是600px但您可以根据需要调整它。
回答by Morpheus
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 widthto more then 200pxand they will stack.
这是jsfiddle工作。将 child 更改width为 more 然后200px它们将堆叠。
