Question

我非常有信心这是在互联网上无休止地讨论过的事情之一，但我找不到解决方案。

我需要在一个段落的同一行上浮动2个div。两个div都有可变的宽度，我需要段落缩小到可用空间并包装其内容，以便没有任何元素本身包裹该行。

我已经设置了JSFiddle

HTML here：

<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解决方案。

感谢。

Answer 1

浮动不会收缩或扩展以适应可用空间。浮动项目始终使用任何子项所需的空间。

那是what flexbox was invented for。

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

或者你可以use a table layout。

Answer 2

如果您正在寻找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;
}

Answer 3

知道了。如果我更改段落显示：block而不是inline-block并更改元素的顺序，以便段落是标记中的最后一个，它可以完美地工作。

三个浮动元素，其中一个缩小到可用空间

3 个答案: