css - CSS浮动左图像列响应

Question

我有 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 列图像宽度，例如 200 像素和第 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

一种方法是这样的

小提琴

第一列：使用float:leftand width:5%;

第二列：固定宽度：200pxfloat:left

第三列：（overflow:hidden或溢出：自动）填充剩余宽度

标记：

<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;
}