Question

我有两个并排的div，它们构成了我的响应式设计的一部分

我将每个div设置在179的高度，因为其中一个div之间存在间隙，并且建议将它们设置为高度。

当没有足够的空间时，div会堆叠，但页面内容会比id更低。

当有空间时，有没有办法让div保持彼此相同的大小，但是当浏览器调整大小并且没有足够的空间时，正确的一个最终只有一个高度比20px而不是179px两个div和他们堆叠？

我希望除了使用媒体查询之外还有其他答案

`

</div>
<div class="right-column1">

</div>
</div>


.container1 {
width: 100%;

}
.left-column1 {
width: 50%;
float:left;
height:179px;
}
.right-column1 {
width:50%;
float:left;
height:179px;
}`

Answer 1

我不确定单独使用CSS是否可行。

我已经在FIDDLE中完成了 - 我不确定它是否适合你。

JS

var $startwindowwidth = $( window ).width();

$( window ).resize(function() {
  if ( $( window ).width() < ( $startwindowwidth * 0.5 ) )
  {
      $( '.right-column1').css({
          'float'  : 'none',
          'height' : '20px'
                                });
      $( '.left-column1').css({
          'float'  : 'none'
                                });
  } else {
      $( '.right-column1').css({
          'float'  : 'left',
          'height' : '179px'
                                });
      $( '.left-column1').css({
          'float'  : 'left'
                                });
   }
});

试试这个http://jsfiddle.net/YAFdz/2/。

不要给它一个高度，你可以通过放入div来居中。

但请记住，当你开始将“固定”宽度信息放入div中时，它不会“流动”。

Answer 2

当屏幕尺寸变小时，您可以使用媒体查询来更改右列的样式。例如，如果您希望两个div的大小相同，直到视口小于200px（此时右列将获得40px的高度），您可以使用以下内容：

＆＃13;

#left , #right{
  width: 50%;
  height: 200px;
  text-align: center;
}


#left{
  float: left;
  background-color: blue;
}


#right{
  float: right;
  background-color: orange;
}

@media (max-width: 200px){
#left{
  width: 100%;
}


#right{
  width: 100%;
  height: 40px;
}
  
}

＆＃13;

<html>
   <body>
       <div id="left"><p>Left</p></div>
       <div id="right"><p>Right</p></div>
   </body>
</html>

＆＃13;

浏览器调整大小时不同的div大小

2 个答案: