Html 如何在同一行中插入3个div

我尝试在同一行中插入两个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的同一行。 如果有人能帮助我，我将不胜感激。

试试这个：

在另一个

周围添加一个包装。将包装器的样式设置为

position:relative

在#content2的样式中添加以下内容：

position:absolute；排名：0；右：0

摆脱内容2上的

style=“float:right；”

按照Marc B的建议，将#content2的宽度固定为合适的宽度

---

看。

嗯，你的宽度加起来不合适。23.4 + 23.4 + 70 = 116.8%. 另外，您只浮动了

content2

div，因此无论您尝试什么，

content1

都将进入它自己的行。