即使您调整浏览器的大小，两个 div 也会彼此相邻浮动

Question

我有两个 div 左右浮动。

<div style="float:left">1</div>
<div style="float:right">1</div>
<div style="clear:both">1</div>

所以一切都很好，我这样做了很多年。 现在我编写了一个 RESONSIVE-DESIGN 代码，所以我不能使用固定宽度。 问题如下：如果屏幕越来越少，右侧的 div 位于左侧的下方。我不要这个。

我知道我可以使用固定宽度来克服这个问题，或者将两者都放在一个包装器中来克服这个问题，但是正如我所说 - 我无法使用固定宽度。

我如何处理两个 div 彼此并排而不是在下方或其他东西（将屏幕更改为小尺寸时）的崩溃

我在响应方面是新手，但我全力以赴 - 这是我的最后一个问题，过去我总是使用固定大小值。

Answer 1

你可以在一定程度上做到这一点。

HTML 标记

<div id="main">
    <div id="one"></div>
    <div id="two"></div>
</div>

CSS

#main{
    height:200px;
    width:100%;

}
#one{
    width:50%;
    background-color:#cccccc;
    height:100%;
    float:left;
}
#two{
    width:50%;
    background-color:#ccffff;
    height:100%;
    float:left;
}

FIDDLE

更好的方法是使用CSS media queries 使用媒体查询，您可以定位特定的屏幕分辨率，这始终是实现响应式设计的加分点。