1

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

我需要在与段落相同的行上浮动 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 解决方案。

谢谢。

4

3 回答 3

0

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

这就是flexbox 的发明目的。

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

或者，您可以使用表格布局。

于 2013-10-25T16:32:06.373 回答
0

如果这是您要查找的内容，请检查此小提琴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-25T16:38:14.423 回答
0

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

于 2013-10-25T17:13:49.777 回答