跨越两行时具有动态宽度的两个div

Question

我正在开发一个移动网站页面，我在一个父级中有两个div，大致设置如下：

<div id="parent">
    <div id="left" style="float:left;"> </div>
    <div id="right" style="float:right;"> </div>
</div>

它们都有一个最小宽度和边距集。

它们并排展示得很好。但我想把它设置成，如果宽度太小（比如在iphone上），它们会横跨两行，单独占据整个页面的宽度。

目前，当它们跨越两行时，我无法将宽度动态跳转到页面的100%。它所做的只是左div向左，右div向右。

我读过一些关于使用内联块，以及处理溢出和位置的文章，但我无法让它发挥作用。

有什么建议吗？

谢谢。

编辑：这是我目前使用的css

<div style="width:96%;">
    <div style="float:left; min-width:220px; margin:10px auto 5px auto;">
        content
    </div>
    <div style="float:right; min-width:230px; margin:0px auto 5px auto;">
        content
    </div>
</div>

Answer 1

试试这个

CSS

#parent { 
  border : 2px solid #000; 
  overflow:hidden;
}
.parent div {
   min-height: 200px;
   padding: 10px;
}
#left {
  background-color: gray;
  float:left; 
  margin-right:20px;
  width:140px;
}
#right { 
  background-color: white;
  overflow:hidden;
  margin:10px;
  min-height:170px;
}
@media screen and (max-width: 400px) {
   #left { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
  }
}

HTML

<div id="parent">
    <div id="left">left</div>
    <div id="right">right</div>
  </div>

演示

Answer 2

您必须为样式标记设置媒体查询。将CSS从内联中取出，改为在样式表中设置它们。

@media only screen and (min-width: 481px) {
  #left {float:left;}
  #right {float:right;}
}

如果屏幕宽度大于480px，则DIV仅左右浮动：

<div id="parent">
  <div id="left" > </div>
  <div id="right"> </div>
</div>