0

HTML

<div class="cont">
<div class="size" id="size1"></div>
<div class="text">Here is some textHere is some text Here is some text</div>
</div>

<div class="cont">
<div class="size" id="size2"></div>
<div class="text">Here is some textHere is some text Here is some text</div>
</div>​

CSS

.size {
    background-color: red;
    height: 100px;
    width: 100px;
}
#size2 {
    width: 200px;
}
.cont {
    padding: 10px;
    float: left;
}​

我需要div.cont's widths 是它们所包含的宽度div.size（在我的实际示例div.size中是一个图像，它的 with 在每个实例中都会有所不同）。

这不会发生，因为div.text它占用的空间比它的容器多，我该如何阻止它并使文本换行？

JS小提琴

4

3 回答 3

3

删除了所有以前的东西（在进行了一些挖掘之后）发现与工作解决方案完全相同的副本。

我的回答也不正确（因为操作员随后指定必须允许图像是可变的）

答案可以在这个 jsfiddle 上找到，并且是css 的完全副本 - 缩小父 div 以适应一个孩子的宽度并限制另一个孩子的宽度

//html

<div id="container">
    <div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div>
    <div id="child2">Lorem ipsum dolor sit amet.</div>
</div>
<br/>
<a id="longtext" href="#">lengthen/shorten text</a>

//css

#container{border:1px solid #f00;display:inline-block;margin:10px; display: table;}
#child1{border:1px solid #0f0;margin:10px; display: table-row; width: 1px;}
#child2{border:1px solid #00f;margin:10px; display: table-cell; width: 1px;}
img {border:1px solid #000;}

基本上它使用 display:table-* 工作（好好阅读）

于 2012-12-08T17:28:26.903 回答
0

'.size{ 浮动：左；}'

让我知道这是否有帮助。

于 2012-12-08T18:21:52.110 回答
0

扩展保罗沙利文的方法，

在你的 CSS 中：

.size {
  ...

    display:block; /*assuming its an image - making sure its block level*/

  ...
}

.cont {
  ...

    position:relative; /*add this to parent container if comming from cms*/

  ...
}

.text {
  ...

    position:absolute;
    top:100%; /*just to make sure content doesnt overlaps image*/

  ...
}

只是为让内容与图像一样宽（加上填充）提供了一个加分点

希望能帮助到你，

小提琴：http: //jsfiddle.net/BKRsT/3/

于 2012-12-09T23:58:38.150 回答