什么是最好的定位方式?浮动,相对,绝对?
可以说我想定位这样的东西:
我如何定位这样的东西,最好的方法是什么?浮动,相对,绝对?
如果你想要一个fluid layout
,使用floats
.
定位元素relative/absolute
使它们按要求显示,inline
因此 aheight/width
是必需的,然后它们变为non-fluid
。
您必须创建一个充当容器的 div
然后再创建三个 div,一个用于右侧,两个用于左侧。
我创建了一个 jSfiddle 文件供您参考。我创建的东西很快
这完全取决于您要使用哪种类型的布局。响应式、流动式或固定式。
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>
CSS
#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;
}