Question

我尝试在同一行插入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放在页面的左侧，一个在另一个上面，我想把第三个div称为“content2”与这两个div放在同一行。如果有人可以帮助我，我将非常感激。

Answer 1

试试这个：

在其他<div>周围添加包装<div>。为包装器提供position: relative。
将以下内容添加到＃content2：position:absolute; top:0; right:0;
摆脱＃content2

style="float:right;"

将＃content2的宽度固定为适合的东西，正如Marc B建议的那样。

请参阅JSFiddle here。

如何在同一行上插入3个div

1 个答案: