css - CSSフロート左画像列レスポンシブ

Question

float を使用して 3 つの列があります。

<div style="width: 100%; margin: auto">
<div style="float: left; width: 5%"> col1 </div>
<div style="float: left; width: auto"> col2 IMAGE in pixels </div>
<div style="float: left; width: 60%"> col3 content </div>
</div>

全幅が必要ですが、列 2 の画像幅はピクセル単位で設定できます (例: 200px、列 3 は 100% を埋める)。

それを達成することは可能ですか？

ありがとう

Answer 1

これも機能するはずです：

JSFIDDLE

HTML:

<div class="wpr">
<div class="col1"> col1 </div>
<div class="col2"><img style="width:400px;" src="http://www.connox.de/m/100030/139194/media/Chikuno-Life/Chikuno-Cube/chikuno-cube-frei-440x440.jpg"></div>
<div class="col3"> col3 content </div>
</div>

CSS:

.wpr{width: 100%; margin: auto, display:inline-block;}
.col1{float: left; width: 5%; height:100%; background:silver;}
.col2{float: left; display:inline; width: auto; }
.col3{display:table-cell; wideth:auto; height:100%; background:red;}

の width プロパティは、それをテストするためだけのものであり、col3 のより多くのコンテンツを持つ単語でもあります

Answer 2

汚いですが、それがあなたの問題を引き起こすはずです：

<script> window.onload = window.onresize = function(event) { var wrapper = (document.getElementById('100% WIDTH ELEMENTS ID')[0].offsetWidth);
document.getElementById('ID WITH MISSING WIDTH').style.width = 100/wrapper-"PRESET IMG WIDTH"; } </script>

Answer 3

1つの方法は次のようになります

フィドル

最初の列: と を使用float:leftしwidth:5%ます。

2 列目: 固定幅: 200px ありfloat:left

3 列目: overflow:hidden(またはオーバーフロー: auto) 残りの幅を埋める

マークアップ:

<div class="wpr">
    <div class="col1"> col1 </div>
    <div class="col2"><img src="http://placehold.it/200x200" alt="" /></div>
    <div class="col3"> col3 content </div>
</div>

CSS

.wpr
{
    width: 100%;
}
.col1
{
    float: left;
    width: 5%;
    height: 200px;
    background: pink;
}
.col2
{
    width: 200px;
    height: 200px;
    float: left;
}
.col3
{
    overflow: hidden;
    height: 200px;
    background: orange;
}