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

如果屏幕宽度超过480px，那么DIV只会向左和向右浮动：

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

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

2 个答案: