我怎么能一个接一个地漂浮三个包装纸

Question

<div id="wrapper1" style="width:200px;float:left;margin-top:0px">
    <img src="./profilepic.jpg"  width="190px" height="220px"/>
</div>
<div id="wrapper2" style="width:400px;float:left">
    <h2>cool</h2>
</div>
<div id="wrapper3" style="width:300px;float:left">
    <h2>Thanks</h2>
</div>

这是我的三个包装纸。我希望它们一个接一个地浮动，但wrapper3有时会定位到wrapper2的底部，我希望wrapper1取200px并跟随wrapper2 400px并且wrapper3 300px总计900px。

我如何让它们一个接一个地漂浮，以便它们占据900px？

Answer 1

将三个div包含在宽度为900px且高度为220px的包装div中。

Answer 2

在我回答之前

让我告诉你一些关于良好做法的事情。

• 使用内联样式（style=属性）被视为错误做法。使用样式表代替（<style>标签），它允许对类似元素进行分组并减少代码。更不用说内容与演示文稿的分离。
• width=标记的height=和<img>属性最终不需要（实际上不验证）px。您应该更正为width="190" height="220"。

答案

您希望将其中所有3个包装在一个容器中，该容器设置为width: 900px;（或min-width: 900px;就此而言。）

<强> Here's an Example

HTML：

<div id=parent>
    <div id=wrapper1>Lorem Ipsum</div>
    <div id=wrapper2>Lorem Ipsum</div>
    <div id=wrapper3>Lorem Ipsum</div>
</div>

CSS：

#parent { /* Applies to parent div */
    min-width: 900px;
}
#parent div { /* Applies to all divs within the parent */
    height: 200px;
    float: left;
}

/* Specific div styling (width and background color) */
#wrapper1 {
    width: 200px;
    background: red;
}
#wrapper2 {
    width: 400px;
    background: green;
}
#wrapper3 {
    width: 300px;
    background: blue;
}