CSS定位-定位的最佳方式

定位的最佳方式是什么？浮动、相对、绝对

假设我想定位如下内容：

我如何定位这样的东西，最好的方法是什么？

---

浮动、相对、绝对？

如果需要

流体布局

，请使用

浮动

---

定位元素

相对/绝对

会使它们显示为

内联

，因此需要

高度/宽度

，然后它们变成

非流体

您必须创建一个充当容器的div

然后再创建三个div，一个用于右侧，两个用于左侧

我已经创建了一个JSFIDLE文件供您参考。我创造了一些快速的东西

这完全取决于你选择哪种类型的布局。灵敏的、流动的或固定的

HTML

<div id="container">
<div id="rightside">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="leftside">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

<div class="leftside">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

</div>​

---

没有一个最好的方法，但我会这样做

HTML

---

答：视情况而定。提出一般性问题，得到一般性答案。我们需要更多的细节，例如：这是针对您无法控制的动态内容还是可以微调的静态内容？代码在哪里？您的问题可能不适合此网站。这是相当开放的，因为当没有一个单一的、明确的答案时，你在寻求“最好的”方式。另外，如果你的一些代码尝试不同的方式，并针对你遇到的具体问题，那也会很好。位置的幽默在哪里？你应该读这本书：它有很多关于布局的技巧。

#container {width:500px;position:relative;overflow:Hidden;outline:1px solid red}

.leftside {float:left;width:225px;margin:0 0 5px 0}
#rightside {float:right;width:200px}

.leftside,#rightside {outline:1px solid black;padding:5px}
​

<div id="wrapper">
    <div id="div3">div 3</div> 
    <div id="div1">div 1</div>
    <div id="div2">div 2</div>
</div>

#wrapper{
    width:450px;
}

#div1,
#div2,
#div3{
    float:left;
    margin:1em;
    padding:1em;
    border:5px solid #000;
    border-radius:8px;
}

#div1, 
#div2{
    width:150px;
    height:75px;
}

#div2{
    clear:left;
}

#div3{
    float:right;
    width:150px;
    height:225px;
}