0

私が欲しいのは、2つのdivを並べてスタックすることだけです。それらはコンテナ内にあります。なぜ機能しないのですか？

これは私のCSSです：

#housecontainer {
    height: 420px;
    width: 1000px;
    padding-left: 110px;
    padding-top: 80px;
}

#houseimage {
    float: left;
    height: 388px;
    width: 516px;
}

#rose {
    width:200px;
    height:100px;
    float:left;
}
4

4 に答える 4

1

いくつかの構造エラーがあります。

次のようにHTMLを構造化してみてください。

http://jsfiddle.net/bGyV4/

于 2012-07-22T00:08:24.327 に答える
1

コメントに投稿したHTMLから判断すると、ページ構造は次のとおりです。

#devcontainer
  #develbox
    #housecontainer
      #houseimage
        p
          a
            img
        #rose

はの子#roseであるため#houseimage、それと同じフローティングには従いません。幅が516で、画像もそうなので#houseimage、余地がなく、#rose下に押し込まれます。

</div>の前にもう1つ置くだけで、必要に応じて、<div id="rose">の内側#housecontainerと隣に #houseimage配置できます。</div>次に、不足している他の2つを追加します。

于 2012-07-22T00:12:34.730 に答える
0

これは、コメントに投稿したHTMLです。

<div id="housecontainer">
    <div id="houseimage">
        <p>
            <a href="images/rosebrook.pdf" target="_blank">
                <img src="images/rosebrookthumb.png" width="516" height="388" />
            </a>
            <div id="rose">
                <div id="rose">THIS ISNT WORKING!!!</div>
            </div>
        </p>
    </div>
</div>

これにはいくつかの問題があります。

  1. 要素のidは一意である必要があります。要素を識別するために使用されます。マークアップには、。を含む2つのdiv要素がありid="rose"ます。
  2. あなたの質問から、あなたが望むように、#houseimageそして#rose並んでいるように見えます。#roseは内部に あるため、これは発生していません#houseimage。つまり、の子です#houseimage。の兄弟にdivなるように、それを外側に移動する必要があります。#rose#houseimage

HTMLを次のように変更します。

<div id="housecontainer">
    <div id="houseimage">
        <p>
            <a href="images/rosebrook.pdf" target="_blank">
                <img src="images/rosebrookthumb.png" width="516" height="388" />
            </a>
        </p>
    </div>
    <div id="rose">
        <div id="roseChild">THIS ISNT WORKING!!!</div>
    </div>
</div>

jsFiddleデモ

于 2012-07-22T00:14:25.417 に答える
0

あなたのhtmlエラー、いくつかのDIVタグが閉じられていません、これを試してください：

<div id="devcontainer">
    <div id="develbox">
        <div id="housecontainer">
            <div id="houseimage">
                <p>
                    <a href="images/rosebrook.pdf" target="_blank">
                        <img src="images/rosebrookthumb.png" width="516" height="388" />
                    </a>
                </p>
            </div>
            <div id="rose">THIS ISNT WORKING!!!</div></div>
        </div>
    </div>
</div>
于 2012-07-22T00:18:48.560 に答える