web-dev-qa-db-ja.com

CSSフロート左が正しく機能しない

2つのdivを左右の2つのセクションに分割しようとしています。左側は静的（高さ300px）で、右側は静的ではありません（投稿やコメントなど）。下部にフッターがあります。

<div>
    <div>
    <div class="right"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div>
    </div>
    <div>
    <div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div>
    </div>

メインのdivを760pxの幅で作成したので、これらの設定では、まだ10pxの余裕があります。ここでの問題は、float-rightをrightクラスのdivに割り当てることができず、float-leftをleftクラスのdivにのみ割り当てることができるということです。 divを上下に変更して位置を再割り当てしようとしましたが、取得したものが希望どおりではありません。何か助けはありますか？

編集

CSS
.right {
font-family: verdana;
font-size: 12px;
border-radius: 3px;
}

.left {
font-family: verdana;
font-size: 10px;
color: #000000;
border-radius: 3px;
}

これは私が望んでいない結果です enter image description here

enter image description here

私が欲しいのは enter image description here

csscss-float
8
Crays

DIVはブロック要素であるため、floatまたはinline-blockをright divに指定して、実際のwidthを次のように取得できます。

.right{float:right}

編集：

以下のコメントに答えてください

floatをdivsに与える場合は、次のようにclear its parentする必要があります。

<div style="overflow:hidden"> 
    <div class="right" style="float: right;"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div> 
    <div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div> 
</div>
14
sandeep

いくつかのdivを削除するか、左右のdivの親divにフローティングを割り当てる必要があります。

<div> 
    <div class="right" style="float: right;"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div> 
    <div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div> 
    <div class="footer" style="clear: both;"><img src="images/members/ava/crays.jpg" style="width:760px; height:80px;" /></div> 
</div>

これはうまくいくはずです。

3
Emir Akaydın

幅の測定を右に行うと、実際にすべてを左に浮かせることで、そのレイアウトを取得できます。あなたのdiv注文は正しくスタックする必要があり、それはあなたが望む場所に自然に浮かびます。必要以上のdivがあります。必ずこれをクリーンアップしてください。

2
creativeedg10