0

ラッパーに2つのdivを並べて作成しようとしています。最初のdiv#contentは、position:relativedivです。

#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;
}

問題は、2番目のdiv#importantが最初のdivの下に表示されることです。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>
4

2 に答える 2

0

s#wrapperの位置をrelativeまたはにしabsoluteます。

次に、内側のdiv位置をに設定しますabsolute

jsfiddleの例:http ://jsfiddle.net/kRHTj/

于 2012-07-11T21:49:05.167 に答える
0

私はそれらを左右両方に浮かせます。

于 2012-07-11T21:51:20.783 に答える