Divは左に浮かぶことはありません

divと画像に私が入力したブロックを配置するのにposition:absoluteを使って画像を追加しました。しかし、私がfloatを残してしまったときは、写真には写りますが、左に浮かびません。それはもう一方の後ろにとどまります。私はそれがposition: relativeDivは左に浮かぶことはありません

コードを使用せずに左フロートすることができます方法：

#knowledge-div { 
 
    height: 50%; 
 
    width: 100%; 
 
    width: 0 auto; 
 
} 
 
#knowledge-div img { 
 
    height: 100%; 
 
    width: 100%; 
 
    float: left; 
 
} 
 
.blocks { 
 
    width: 498px; 
 
    height: 50%; 
 
    float: left; 
 
    position: absolute; 
 
} 
 
#green { 
 
    background-color: green; 
 
} 
 
#orange { 
 
    background-color: orange; 
 
}

<div id="knowledge-div"> 
 
    <img src="Pictures/biganswer.jpg"> 
 
    <div class="blocks" id="green"></div> 
 
    <div class="blocks" id="orange"></div> 
 
</div>

出典

2016-09-30 Jon2713

絶対位置を持つ要素を浮動させることはできません。あなたはおそらくそれを相対的に配置しようとするか、代わりにマージン – Franco

を左に動かすと、私が動いているものの高さは、基本的に全体のdivをカバーする50％の代わりに10％のように戻ってきます – Jon2713

あなたが配置したい要素を自分の 'div'に入れる方が良いでしょう。あなたはまた、同時に、問題を引き起こす同じ方向に2つの要素を浮かべています。あなたの質問も十分ではなく、あなたが実際にやっている帽子について説明していません。 – Franco

#knowledge-div { 
    height: 50%; 
    width: 100%; 
    width: 0 auto; 
} 
#knowledge-div img { 
    height: 100%; 
    width: 100%; 
    float: left; 
} 
.blocks { 
    width: 498px; 
    height: 50%; 
float:left; 
} 
#green { 
    background-color: green; 
} 
#orange { 
     background-color: orange; 
} 

<div id="knowledge-div"> 
    <img src="Pictures/biganswer.jpg"> 
    <div id="green" class="blocks" >Color green</div> 
    <div class="blocks" id="orange">Color orange</div> 
</div> 

No need to define position property in blocks class. Add some text in div for both colors.

出典

2016-09-30 05:43:55

あなたが位置を使用しないでください。絶対あなたは要素をフロートしたいとき。あなたは、それは相対的な、パディングやマージンを定義しますまで、またはしない限り、絶対で定義された要素の位置は、ない変更を行い

#knowledge-div { 
 
    height: 50%; 
 
    width: 100%; 
 
    width: 0 auto; 
 
} 
 
#knowledge-div img { 
 
    height: 100%; 
 
    width: 100%; 
 
    float: left; 
 
} 
 
.blocks { 
 
    width: 50%; 
 
    height: 50%; 
 
    float: left; 
 
    clear: none; 
 
    color: red; 
 
}

<div id="knowledge-div" style="height:100px; background-image:url('https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png'); background-color: #cccccc;"> 
 

 
    <div class="blocks" id="green" >Green</div> 
 
    <div class="blocks" id="orange">Orange</div> 
 
    <div style="float:left; clear:both"></div> 
 
</div>

出典

2016-09-30 05:30:17 BuddhiP

ああ、私はそれをしましたが、あなたはどのように絵に緑とオレンジを得るのですか？「Position：relative」を使用すると空白が残ってしまいます。新しいコンテンツを追加すると、そこに何かがあると思ってプッシュダウンします。 – Jon2713

私はあなたが浮かぶだけでそれを達成できるとは思わない。親divの背景として使用できませんか？更新されたコードを確認してください。 – BuddhiP

：

はこのような何かを試してみてください。要素を移動しようとすると、存在する十分な領域がない場合、隣接する要素が移動します。

出典

2016-09-30 05:30:39

Divは左に浮かぶことはありません

答えて

関連する問題