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列图像宽度可以像素为单位设置，例如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;}

宽度属性仅用于测试它现在它也是col3中含有更多内容的单词

Answer 2

一种方式就是这样

<强> FIDDLE

第一栏：使用float:left和width:5%;

第二栏：固定宽度：200px，float: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;
}

Answer 3

脏，但我想这应该会导致你的问题：

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

CSS浮动左图像列响应

3 个答案:

标记：

CSS