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>

そのため、ページの左側に 2 つの div が重ねて配置されており、これら 2 つと同じ行に「content2」という 3 番目の div を配置したいと考えています。誰かが私を助けてくれれば、とても感謝しています。

4

1 に答える 1

1

これを試して：

  1. <div>他の の周りにラッパーを追加します<div>。ラッパーに のスタイルを指定しposition: relativeます。
  2. #content2 のスタイルに次を追加します。position:absolute; top:0; right:0;
  3. style="float:right;"#content2の
  4. マーク B が提案したように、#content2 の幅を収まるように修正します。

こちらの JSFiddleを参照してください。

于 2013-05-17T22:13:43.967 に答える