0

私は3つの部門を持っています。1番目の隣に、最後の2つを残してフロートしたい。しかし、2 番目のものは 3 番目のものの後に浮きます。何故ですか？

ありがとうございました！

これは私のコードです:

HTML

<div id="holder_idea"><h5>something</h5></div>
<div id="visual_holder_second">something2</div>
<div id="invest">
<h2>something3</h2></div>

CSS

#holder_idea{
width:200px;
padding-right:48px;
padding-left:32px;
padding-top:32px;
display:inline-block;
}

#visual_holder_second{
font-family: "Times New Roman";
font-size:7.5em;
text-transform:uppercase;
line-height:60%;
width:140px;
float:right;
padding-top:32px;
}

#invest{float:right;}
4

3 に答える 3

1

左に浮かびたいのに、なぜ右に浮くのですか？

3 つの div すべてに float left を適用します: http://jsfiddle.net/ngztf/

140px の幅は、実際のコンテンツよりもかなり小さいです (テスト目的で 3.5em に縮小しました)。

div {
    float: left;
    border: 1px solid green;
}
#holder_idea {
    width:200px;
    padding-right:48px;
    padding-left:32px;
    padding-top:32px;
}
#visual_holder_second {
    font-family:"Times New Roman";
    font-size:3.5em;
    text-transform:uppercase;
    line-height:60%;
    width:140px;
    padding-top:32px;
}
于 2013-03-25T10:21:29.950 に答える
0

を に変更して、 onを削除してfloat: right;みてください。float: left;width: 140px#visual_holder_second

実際、複数列のレイアウトを使用する場合は、古き良きテーブルを使用することを恐れないでください。彼らは 90 年代に虐待で非難されましたが、今でも彼らの居場所はあります。

于 2013-03-25T06:23:21.393 に答える
0

私はあなたがこのように見えるように圧力をかけます

 | div1 | div2|
 |      | div3|

その場合、float は div をオブジェクトの通常の流れの外に置き、前の要素の近くに「固定」し、前の行にスペースがなくなった場合にのみ次の行に移動することを思い出してください。例: http://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery (はい、w3schools が悪であることは知っています) ウィンドウ サイズの変化に伴って位置がどのように変化するかに注目してください。

于 2013-03-25T06:20:29.053 に答える