CSS float 左图像列响应

Question

我有 3 列使用 float 。

<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里面的word内容更多了