跨越两行时具有动态宽度的两个 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>

DEMO

Answer 2

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

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

如果屏幕宽度超过 480 像素，则 DIV 只会向左和向右浮动：

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