[英]How do I correctly position 2 divs around main wrapper div
I am trying to code layout of my website to display ads on both sides of search engine div but for some reason right div is not aligned to top. 我正在尝试对网站的布局进行编码,以在搜索引擎div的两侧显示广告,但由于某些原因,正确的div不在顶部。 Any idea why is it like that? 知道为什么会这样吗?
I tried on jsfiddle.net - http://jsfiddle.net/pbutrynowski/dThwa/1/ 我在jsfiddle.net上尝试过-http: //jsfiddle.net/pbutrynowski/dThwa/1/
<div id="ads-wrapper">
<div id="ads-left-pane">
Left ad goes here - aligned to top of #wrapper div
</div>
<div id="wrapper">
Content goes here
</div>
<div id="ads-right-pane">
Right ads goes here - should be aligned to top od #wrapper div
</div>
</div>
#ads-wrapper {
width: 1360px;
margin: 0;
}
#ads-left-pane {
width: 199px;
background-color: #f4f4f4;
float: left;
}
#ads-right-pane {
width: 199px;
background-color: #f4f4f4;
float: right;
}
#wrapper {
width: 960px;
margin: 0 auto;
min-height: 200px;
}
This is how I would like to have it - http://awesomescreenshot.com/0812mobba0 这就是我想要的方式-http://awesomescreenshot.com/0812mobba0
Thanks for any ideas 谢谢你的任何想法
There were a few simple errors in your code. 您的代码中有一些简单的错误。 Try this instead: 尝试以下方法:
<div id="ads-wrapper">
<div id="ads-left-pane">
Left
</div>
<div id="wrapper">
Content goes here
</div>
<div id="ads-right-pane">
Right
</div>
<div style="clear:both;"></div>
</div>
Also, I suggest making a "clear" class and applying that to a clear div. 另外,我建议创建一个“清除”类并将其应用于清除div。 It's a tiny step, but it can save you some typing in the long run. 这是一个很小的步骤,但是从长远来看,它可以节省一些键入时间。
.clear{clear:both;}
<div class="clear"></div>
There are a couple of errors in your code (one of your <div>
ID's included the '#' character), but besides those issues, you will probably have better luck making your <div>
elements have display: inline-block'
styling. 您的代码中有几个错误(您的<div>
ID中的一个包含了'#'字符),但是除了这些问题之外,您可能更幸运地使您的<div>
元素能够display: inline-block'
样式。 It usually ends up being much more rigid and easy to make changes to compared to using float
. 与使用float
相比,它通常会变得更加僵硬并且易于更改。
Here is an updated fiddle that can get you started in that direction. 这是一个更新的小提琴 ,可以帮助您朝这个方向开始。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.