Question

这是我的模板：

<div id="block1">text</div>
<div id="block2">
   <span>content of variable size</span>   
</div>

和一些基本的CSS

#block1 {
    float:left;
}

#block2 {
    float:right;
}

#block2 span {     
}

在缩小width时，我怎么能让它表现得如此，一旦两个div s不能适合页面内联，第二个div将低于第一个{而不是正确的浮动）？

注意：我想避免使用媒体查询。

此响应主题CSS将用于具有不同大小内容的多个网站。

JSFiddle

在当前的JSFiddle中，第二个div位于右侧。对我来说很好。

如果可能没有媒体查询，我想设计css，这样一旦第二个div下面，跨度内容不在右侧

Answer 1

如果你的意思是＆＃34;我希望div2在下面，但是这次对齐了＃34;，这是不可能的，因为这种行为不能仅使用CSS来预测。

没有CSS方法可以知道它何时进入下方，因此此时无法更改浮动属性。

您可以使用Javascript或jQuery实现此目的。逻辑将是：

on ( window resize ) {
    if ( div1_width + div2_width > container_width ) {
        Change div2 CSS.
    }
}

当然我也建议使用媒体查询。

Answer 2

您可以在div上设置最小宽度。然后，当线太小时，右边的线会下降。但是，它仍然会浮动，这可能会导致问题。那就是媒体查询发挥作用来解决这些问题。

Answer 3

太多的媒体查询无法提供响应迅速的设计，更不用说它们会让人头疼。

无论如何，您必须使用至少一个媒体查询来实现真正的响应式设计，最简单的示例如下：

<div id="block1">text</div>
<div id="block2"> <span>content of variable size</span> 
</div>  


* {
    padding: 0;
    margin: 0;
}
#block1 {
    float:left;
    height: 200px;
    background: yellow;
    width: 49.5%;
    margin-right: .5%;
}
#block2 {
    float:right;
    height: 200px;
    background: tomato;
    width: 49.5%;
    margin-left: .5%;
}
#block2 span {
}
@media only screen and (max-width : 768px) {
    #block1 {
        float:none;
        width: 100%;
    }
    #block2 {
        float:none;
        width: 100%;
    }
}

小提琴here。

如果你想看一些更实用的东西，一个很好的起点是here（它是一个手风琴改变位置的例子，取决于屏幕大小，使用媒体查询）。

希望有所帮助。

CSS浮动和响应行为

3 个答案: