固定サイズの3列目の応答3列レイアウト

Question

3列からなる単純な要素を作成しようとしています.3列はicon-imageです。 要素を反応的にしたいが、icon-imageは常に同じサイズ（たとえば40x40ピクセル）にする必要があります。 したがって、1.と2.の列は％値を持ち、3.の列の幅は40pxです。小さな画面でicon-imageのサイズを変更したくないアイコンの幅は常に40ピクセルです。

.container { 
 
    width: 80%; 
 
} 
 

 
.text1 { 
 
    float: left; 
 
    width: 30%; 
 
} 
 

 
.text2 { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
.image { 
 
    float: right; 
 
    width: 120px; 
 
}

<div class="container"> 
 

 
    <p class="text1">Some Titel</p> 
 

 
    <h3 class="text2">Some Text and some more text...</h3> 
 

 
    <img src="image1.jpeg" alt="" class="image" /> 
 

 
</div>

https://jsfiddle.net/mkrizanek/usfmk6r7

敬具、 ミラノ

Answer 1

とCSSでちょっと微調整しました。しかし、私はあなたが論理を得ることを願っています。私はのcontainerをflexに変更しました。要件に応じて、コンテナ内の要素のwithを変更することができます。

.container { 
 
    background-color: #DDDDDD; 
 
    width: 80%; 
 
    display: flex; 
 
} 
 

 
.text { 
 
    background-color: #BBBBBB; 
 
    width: 50%; 
 
} 
 

 
.heading { 
 
    background-color: #999999; 
 
    width: 50%; 
 
} 
 

 
img { 
 
    max-width: 120px; 
 
    max-height: 120px; 
 
}

<div class="container"> 
 
    <p class="text">Some Text</p> 
 
    <h3 class="heading">Heading</h3> 
 
    <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" class="image" /> 
 
</div>

Answer 2

あなたの最良のオプションは、フレックス使用することが考えられます。

コンテナdivに「display：flex; justify-content：space-between」と「flex：1;」を設定します。応答可能にする各セクションで

2番目のdivのテキストを画像に押し込む場合は、「text-align：right;」を追加することもできます。それに。ここで

.container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.text1 { 
 
    flex: 1; 
 
} 
 

 
.text2 { 
 
    flex: 1; 
 
} 
 

 
.image { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #088; 
 
}

<div class="container"> 
 

 
    <p class="text1">Some Title</p> 
 

 
    <h3 class="text2">Some Text and some more text...</h3> 
 

 
    <img alt="" class="image" /> 
 

 
</div>

フレキシボックスのための優れたリソースです：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。