并排div与负相对位置

我想在包装中创建两个并排的div。第一个div #content是一个位置：relative div。并排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; 
background-color: red; 
} 

#important { 
float: right; 
position: relative; 
top: -1120px; 
width: 231px; 
margin-right: 10px; 
background-color: green; 
}

问题是第二个div #important显示在第一个下面。 div和填充/边距都有足够的空间。我可以通过将它浮动到右侧并使用负顶端位置来使其工作，并且它显示正常，但我觉得好像有一个更好/正确的方法来执行此操作。

HTML：

<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>

来源

2012-07-11 Kyle Harvey

发布一些html代码呢！ – 2012-07-11 21:45:39

我的不好。我会张贴一些给你一个感觉。 – 2012-07-11 22:14:17

充分利用#wrapper的立场是relative或absolute。

然后设置内部div位置为absolute。

的jsfiddle例如：http://jsfiddle.net/kRHTj/

来源

2012-07-11 21:49:05 kevin628

我试图避免绝对定位，因为我从旧表格布局设计转换此网站，并且我希望网站居中在页面中，而不管屏幕的大小。也许我误解了你的回应以及我正在做的事情。 – 2012-07-11 22:16:23

@KyleHarvey我可能误解了你原来的帖子。你是否试图让两个div并排放置？ – kevin628 2012-07-12 16:15:28

是的。我有两个div封装。包装器的边距自动对齐。由于包装的居中，两个内部分区需要并排使用而不使用绝对定位。我知道相对定位是相对于div最初显示的位置，但是有没有办法使某个东西相对于容器div？ – 2012-07-18 16:00:05

我会漂浮他们两个左或右。

来源

2012-07-11 21:51:20 dezman

我之前试过将它们浮起来，而且我之所以选择它也有一些原因。我认为有人建议将它们浮动可能会导致某些地方出现问题......无论哪种方式，如果我现在将它们浮动，#important会重叠约10px，这似乎是新出现的滚动条占用的内容。如果我更改为溢出：隐藏，#important完全消失（如我缺少的Facebook供稿...）。更改#important的宽度不会使其重新出现，所以不应该有空间问题。 – 2012-07-11 22:35:16

并排div与负相对位置

回答

相关问题