三个浮动元素与一个缩小到可用空间

我相当有信心这是那些已经在互联网上无休止地讨论过的东西之一，但我找不到解决方案。三个浮动元素与一个缩小到可用空间

我需要在同一行上浮动2个div作为段落。这两个div的宽度都是可变的，我需要将段落缩小到可用空间并将其内容包裹起来，以免任何元素自行换行。

我已经在这里建立了一个JSFiddle

HTML：

<div class="icon"></div> 
<p>This is a really long line of text that will need to wrap</p> 
<div class="count"></div>

此处的CSS：

.icon {float:left; width:50px; height:50px; background-color:#4d4d4d; margin-right:10px} 
p {margin:0; overflow:auto; display:inline-block} 
.count {float:right; width:250px; height:50px; background-color:#ff0000; margin-left:10px}

我知道我可以使用JavaScript来实现这一点，但我而不是找到一个纯粹的CSS解决方案。

谢谢。

来源

2013-10-25 Fijjit

您问题中的代码与小提琴中的代码不同。 – j08691

这样的东西 - 宽度百分比宽度和行内块：http://jsfiddle.net/LTuGW/ – jbenjohnson

对不起 - 我粘贴错误的小提琴URL - 我编辑了问题，以纠正链接 – Fijjit

花车不缩小或扩大以适应可用空间。浮动物品总是使用任何儿童所需的空间。

那就是what flexbox was invented for。

.flex-column-container { 
    flex: 1 auto 1; 
}

或者您可以use a table layout。

来源

2013-10-25 16:32:06 feeela

请检查该小提琴，如果这是你在找什么http://jsfiddle.net/Mohinder/dEwuU/

这里是HTML

<div class="main"> 
    <div class="w_200"></div> 
    <div class="middle"></div> 
    <div class="w_200"></div> 
</div>

这里是CSS

body,div{ 
    margin:0px; 
    padding:0px; 
} 
.main { 
    width:100%; 
    text-align:center; 
    min-width:404px; 
    background:black; 
    float:left; 
} 
.w_200 { 
    width:200px; 
    background:red; 
    height:100px; 
    float:left; 
} 
.middle { 
    height:100px; 
    background:red; 
    float:left; 
    width: 49.2%; 
    width: -webkit-calc(100% - 404px); 
    width: -moz-calc(100% - 404px); 
    width: calc(100% - 404px); 
    margin:0px 2px; 
}

来源

2013-10-25 16:38:14

感谢您的链接。不幸的是，没有一个元素会具有已知的宽度。虽然我已经将它们包含在小提琴中，但它们将会有宽度可变的，正如我在问题中所说的那样。所以段落需要缩小以适应剩下的空间。 – Fijjit

明白了。如果我将段落更改为显示：块而不是内联块，并更改元素的顺序，以便段落是标记中的最后一个，它可以很好地工作。

来源

2013-10-25 17:13:49 Fijjit

三个浮动元素与一个缩小到可用空间

回答

相关问题