Question

<html>
<head>

<style type="text/css">
.floatleft {
    border: 1px solid blue;
    float: left;
}
.floatright {
    border: 1px solid red;
    float: right;
}

@media screen and (max-width: 800px) {
    #div1 {
        float: none;
    }
}
</style>

</head>
<body>

<div id="div1" class="floatleft">Div 1</div>
<div id="div2" class="floatleft">Div 2</div>
<div id="div3" class="floatleft">Div 3</div>
<div id="div4" class="floatright">Div 4</div>

</body>
</html>

我正在进行我的第一个RWD项目，并且我正在努力了解div的重新定位如何在调整大小时起作用。

在我的代码示例中，在调整大小到800px时div1将移动到所有其他div之上，这就是我想要的，但我发现难以理解的是我如何将div4移动到div1的右侧。图片如下。

enter image description here

Answer 1

您应该将div 1,2和3包装在左侧浮动的父div中。然后你的div 4可以独立漂浮。相应地调整宽度。

<div id="parent" class="floatleft">
    <div id="div1">Div 1</div>
    <div id="div2" class="floatleft">Div 2</div>
    <div id="div3" class="floatleft">Div 3</div>
</div>
<div id="div4" class="floatright">Div 4</div>

See this fiddle

Answer 2

你是右脚，你需要只调用div 2上的右拉类并将它放在第一个上，div将显示默认值为block而另外2个将显示内联是彼此相邻的。

    <div id="div4" class="floatright">Div 4</div>
<div id="div1">Div 1</div>
<div id="div2" style="display:inline;">Div 2</div>
<div id="div3" style="display:inline;">Div 3</div>


div{
    border: 1px solid blue;
    display:inline;
}

.floatright {
    border: 1px solid red;
    float: right;
}

见fiddler

Demo fiddler

Answer 3

您可以为两者设置百分比宽度，div1表示宽度为80％而div4表示宽度为20％？虽然，div4必须低于html中的div1才能工作。

你现在没有设置任何宽度吗？

Div在响应式网页设计中重新定位

3 个答案: