Html 带负相对位置的并排divs
我试图在包装器中创建两个并排的div。第一个div#content是位置:relative divHtml 带负相对位置的并排divs,html,css,css-float,Html,Css,Css Float,我试图在包装器中创建两个并排的div。第一个div#content是位置:relative div #wrapper { background-image: url(assets/images/BG2.gif); margin-right: auto; margin-left: auto; width: 996px; overflow: auto; } #content { position: relative; top: 10px; left: 10px; width: 745px; bac
#wrapper {
background-image: url(assets/images/BG2.gif);
margin-right: auto;
margin-left: auto;
width: 996px;
overflow: auto;
}
#content {
position: relative;
top: 10px;
left: 10px;
width: 745px;
background-color: red;
}
#important {
float: right;
position: relative;
top: -1120px;
width: 231px;
margin-right: 10px;
background-color: green;
}
问题是第二个div#important显示在第一个div的下面。div和padding/margins都有足够的空间。我可以通过将其向右浮动并使用负的顶部位置使其工作,它显示得很好,但我觉得似乎有更好/正确的方法来做到这一点
HTML:
标题
字幕
副标题
depry derp
derp derp derp
标题
推特订阅源
...
重要信息
Derp
成就
即将到来的活动
素材
更多内容
使#包装器
的位置为相对
或绝对
然后将内部div位置设置为绝对
jsfiddle示例:我会将它们左右浮动。也发布一些html代码!我的错。我会发布一些让你感觉一下。我试图避免绝对定位,因为我正在从旧的表格布局设计转换此网站,我希望该网站在页面中居中,无论屏幕大小如何。也许我误解了你的回答以及我正在做的事情。@KyleHarvey我可能误读了你原来的帖子。你是想让两个潜水艇并排就位吗?是的。我在一个包装袋里有两个div。包装页边距自动对齐。由于包装器居中,两个内部div需要并排放置,而不使用绝对定位。我知道相对定位是相对于div最初显示的位置,但是有没有办法使某些东西相对于容器div?@KyleHarvey只需在两个div和容器div上使用
float:left
属性。这将使它们并排放置。我发誓我以前试过。我尝试在div和container div上向左浮动,所有的东西都移动了,但是当我没有浮动container div时,一切都起作用了。谢谢我以前试过让它们浮起来,但我选择不浮是有原因的。我想有人建议,浮动它们可能会在某个地方引起问题……不管怎样,如果我现在浮动它们,内容的“重要重叠”约为10px,这似乎就是新出现的滚动条所使用的内容。如果我改为overflow:hidden,#important将完全消失(就像我丢失的facebook提要…)。更改#important的宽度不会使其重新出现,因此不应存在空间问题。
<div id="wrapper">
<div id="content">
<img src="assets/photos/bid day 046.jpg" alt="Bid Day" width="745" height="311" />
<div id="fraternity">
<p align="center"><span class="style5"><strong>TITLE</strong><br />
Subtitle<br />
Sub-subtitle</span></p>
<p align="justify">depry derp</p>
<p align="justify">derp derp derp</p>
<p class="style5" align="center"><br/><strong>Title<br/>
Twitter Feed</strong></p>
<div id="twitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>...</script>
</div>
</div>
<div class="fb-like-box" data-href="something" data-width="292" data-colorscheme="dark" data-show-faces="false" data-stream="true" data-header="false">
</div>
</div>
<div id="important">
<p align="center"><strong>IMPORTANT INFORMATION</strong><br />Derp!</p>
<img class="divider" src="assets/images/hr.gif" alt="HR" width="183" height="15" />
<p align="center"><strong>Achievements<br /></p>
<img class="divider" src="assets/images/hr.gif" alt="HR" width="183" height="15" />
<p align="center" class="style11"><strong>UPCOMING EVENTS<br /></strong>stuff<br /></p>
<p align="center"><br /> <strong>more stuff</strong><br /></p>
</div>
</div>