0

我尝试在同一行插入 2 个 div 并且不工作。最后一个 div 始终放在页面底部。

这是CSS：

 #content1
   { 
  background-image:url(html/images/content1.png);
width: 23.4%;
height: 100%; 
margin-top: 9%;
margin-left: 0;
 padding-bottom: 5%;
}
.middle_menu
{
list-style-type:none;
font-family:Arial, Helvetica, sans-serif;
 font-size:13px;
 color:#BDBDBD;
text-decoration:none;
padding: 5%;
  }
  #chat_menu
 { 
background-image:url(html/images/content1.png);
 width: 23.4%;
height: 100%; 
margin-top: 1%;
 margin-left: 0;
 }
#chat
{
 padding-top: 2%;
 padding-bottom: 2%;
    margin-left: 2.5%;
  }
   #content2
  { 
  background-image:url(html/images/content2.jpg);
  width: 70%;
    height: 100%; 
   margin-top: 1%;
   margin-left: 0;
    }

这是HTML：

<div id="content1">
                <ul class="middle_menu">
            <li><a href="index.html" >Naruto Shippuden Ep. 313</a></li>                                                                                                                                                                                                         
            <li><a href="index.html" >Strike Witches Ep. 8</a></li>
            <li><a href="index.html" >Sword Art Online Ep. 24</a></li>
            <li><a href="index.html" >Baccano! Ep. 8</a></li>
        </ul>
                </div>
    <div id="chat_menu">
                <div id="chat">"Here's a online chat script"</div>                    
            </div>
    <div id="content2"  style="float: right;"> 
        <img src="html/images/2.png" align="center" valign="center">
        </div>

因此，页面左侧有两个 div 一个接一个地放置，我想将名为“content2”的第三个 div 与这两个放在同一行。如果有人可以帮助我，我将不胜感激。

4

1 回答 1

1

尝试这个：

  1. <div>在其他<div>s周围添加一个包装器。给包装器一个样式position: relative。
  2. 将以下内容添加到#content2 的样式中：position:absolute; top:0; right:0;
  3. 摆脱style="float:right;"#content2
  4. 正如 Marc B 建议的那样，将 #content2 上的宽度固定为适合的宽度。

请参阅此处的 JSFiddle。

于 2013-05-17T22:13:43.967 回答