html - 即使您调整浏览器大小时，两个 div 也会彼此相邻 float

Question

我有两个左右浮动的 div。

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

所以一切正常，我多年来一直这样做。现在我编写了一个 RESONSIVE-DESIGN 代码，所以我不能使用固定宽度的。问题如下:如果屏幕变小，则右侧 div 位于左侧下方。我不想要这个。

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

我如何处理两个 div 彼此相邻而不是在下方或其他东西的折叠(当将屏幕更改为小尺寸时)

我是响应式的新手，但我得到了所有的 wokr - 这是我的最后一个问题，我过去总是使用固定大小的值。

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使用媒体查询，您可以定位特定的屏幕分辨率，这始终是实现响应式设计的一个加分点。