2つのフローティングdivと非テキスト要素の問題

Question

2つのdivが両方ともフローティングになるようにラッパーdiv（ctccon）を作成しました。これは、右div（conright）の中に画像またはテーブルを追加し、追加された要素が左div（conleft）の下にプッシュされるまでうまく動作します。

私のCSS私はそれはおそらく私が再を理解していない何かを知っている

.ctccon { 
    font-family: 'Comfortaa', cursive; 
    color: #8c8c8c; 
    overflow: hidden; 
} 

.ctccon .conleft { 

    float:left; 
    width:40%; 
    font-size:0.7em; 

} 

.ctccon .conright { 
    float:left; 
    font-size:1em; 
} 

と、（追加された要素なし）私のhtml

<div class="ctccon"> 
    <div class="conleft"> This is the left div </div> 
    <div class="conright">This is the right div </div> 
</div> 

と添加元素

<div class="ctccon"> 
    <div class="conleft"> This is the left div </div> 
    <div class="conright">This is the right div <img src="pic1.jpg"> </div> 
</div> 

と浮かれていますが、解決策が見つかりませんでした。すべてのポインタ？

-----更新------- 私はそれ以来、イメージを削除し、テーブルを追加しました。あなたは、エラーのイメージを共有する場合、それは良くなる

Answer 1

しかし：まだ下の画像あたりと同じ問題を取得

私は、画像を使用して、コードを再作成し、テーブルとそれは他のdivの下に押し込まれません。

しかし、私があなたに起こっかもしれないかを説明しましょう：

1：あなたが左に押され2 div要素を持って、そのうちの一つは、スペースを持つようになれば、それはあなたの他のdivの下に自分自身を配置します、 なぜ？左に押しているので！、それは左に押して、それの隣に何もない場合。それはそのスペースをとり、意図されたことをして、左に浮かぶ。

2：あなたのdivを右に置いておきたい場合は、CSSコードをfloat RIGHTに入れて、左のdivを無視して右に表示します（画面全体を表示しない限り）。

3：他の部門が利用可能な領域の残りの60％以上を占める場合、画像に収まるようにボタンにプッシュされます。

は、私はあなたがあなたのconrightのdivの中にあなたのコードにこれを追加することができると思い、あなたの問題を解決するには：あなたはこのdiv要素の幅を指定いけない場合ので?,

.ctccon .conright { 
    float:left; 
    font-size:1em; 
    width: 60%; 
} 

は、なぜあなたはこの本を持っていない、とその内容は60％以上のスペースを必要とし、底に押し込むことになります

これがあなたの質問に答えられない場合は、あなたのエラーの写真を提供してください。画像のサイズに依存

Answer 2

：

テキストプラスイメージが最初のdivによって残された空間よりも広くなる場合には、それが最初のdivの下に移動します。

しかし、2番目のdivには、最大60％の幅が有効になるように幅を追加できます。

追加/スニペットは、次のように

.ctccon { 
 
    font-family: 'Comfortaa', cursive; 
 
    color: #8c8c8c; 
 
    overflow: hidden; 
 
} 
 

 
.ctccon .conleft { 
 
    float: left; 
 
    width: 40%; 
 
    font-size: 0.7em; 
 
} 
 

 
.ctccon .conright { 
 
    width: 60%; 
 
    float: left; 
 
    font-size: 1em; 
 
}

<div class="ctccon"> 
 
    <div class="conleft"> This is the left div </div> 
 
    <div class="conright">This is the right div <img src="http://placehold.it/400x300"> </div> 
 
</div>

Answer 3

山車が仕事をしようとした後、私はだけではなく、グリッドを使用して終了とCSSのコードを変更：

.ctccon { 
display: grid; 
grid-template-columns: 1fr 2fr; 
grid-gap: 20px; 
font-family: 'Comfortaa', cursive; 
color: #8c8c8c; 
} 

.conleft { 

    font-size:0.7em; 

} 

.conright { 
    font-size:1em; 
} 

今私は得ようとしていたレイアウトを得ました：

このようにすれば、メリットがあるため、ウェブサイトの応答性を向上させることが容易になります。私はscssとブレークポイントを使用しているので、各ブレークポイントに対してCSSをわずかに変更する必要があります。