2

画像を含む div を別の div に配置しようとしています。この親 div には、完全に機能する 2 つの他の div もあります。親と子の div の html コードは次のとおりです。

     <div id="contentsWrapper">
     <div><ul id="sideNav">
         <li><a href="linkone.html" id="linkone">One</a></li>
         <li><a href="linktwo.html" id="linktwo">Two</a></li>
     </ul></div>

     <div id="text">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <br />
         sed diam nonummy  nibh euismod tincidunt ut laoreet dolore magna.
     </div>

     <div id="picture">
          <img src="picture.jpg" alt="picture" height="200" width="200" />
     </div>
</div>

CSSコードは

#contentsWrapper {
    width: 800px;
    margin-left: 10px;
}

#sideNav {
    padding: 0;
    list-style: none;
    width: 160px;
    margin-top: 0px;
    border-bottom: 1px dashed #999;
    position: absolute;
 }
 #text {
    width: 375px;
    margin-left: 180px;
    font-weight: bold;
 }
 #picture {
    position: absolute;
    width: 225px;
    margin-left: 575px;
    background-color: #FFFF00;
 }

ただし、これにより、画像は常に画面の左側からの正しい位置に配置されますが、contentsWrapper div の下に配置されます。テキストだけを使用してみて、画像の div の width と margin-left の値を変更しましたが、それでも同じ結果が得られます。

4

4 に答える 4

1

絶対配置により、コンテナから削除されます。代わりに次のようにしてみてください。

#picture {
width: 225px;
float:right;
background-color: #FFFF00;

}

于 2013-01-24T11:35:14.077 に答える
1

float:left; in the #textスタイルを追加して作業を開始....

#text {
    width: 375px;
    margin-left: 180px;
    font-weight: bold;
    float:left;
 }
于 2013-01-24T11:36:27.970 に答える
0

position:absolute を削除するか、position:relative を親 div に指定する必要があります。

そして、なぜ巨大なマージンがあるのですか？

#contentsWrapper {
    width: 800px;
    margin-left: 10px; background:red; position:relative; overflow: hidden; height:auto
}

#sideNav {
    padding: 0;
    list-style: none;
    width: 160px;
    margin-top: 0px;
    border-bottom: 1px dashed #999;
    float:left
 }
 #text {
    width: 375px;
    font-weight: bold; float:left
 }
 #picture {
    width: 225px;
    background-color: #FFFF00; float:left
 }

デモ

于 2013-01-24T11:33:20.503 に答える
0

それはあなたが彼にやるように言ったことを正確にやっています。しかし、あなたが何をしようとしているのかわからないだけかもしれません (おそらく画像を追加しますか?)

最初の質問: なぜposition:absolute画像を使用しているのですか? これにより、フローから削除されます。

2 番目の質問: なぜwithと notをposition:absolute一緒に使用しているのですか?margin-leftleft

そして、左を使用している場合、親に与えるposition:relativeと、親から計算されます。

于 2013-01-24T11:31:01.817 に答える