Question

我想这是一个标准的CSS问题，但我无法弄清楚。

HTML

<div class="container">
    <div class="outer">
        <img class="img">
        <div>
            <h4><a href="#">Link</a></h4>
            <span>Text</span>
        </div>
    </div>
    <div class="outer">
        <img class="img">
        <div>
            <h4><a href="#">Link</a></h4>
            <span>Longer Text which breaks the design</span>
        </div>
    </div>
    <div class="outer">
        <img class="img">
        <div>
            <h4><a href="#">Link</a></h4>
            <span>Text</span>
        </div>
    </div>
</div>

CSS

.container {
    width: 800px;
    background-color: yellow;
}

.outer {
    width: 31%;
    margin: 0.5em;
    background-color: blue;
    display: inline-block;
    height: 100px;
}

.outer div {
    display: inline-block;
    float: left;
    margin: 10px 10px 10px 0;
    background-color: red;
}

.img {
    display: inline-block;
    float: left;
    margin: 10px;
    width: 80px;
    height: 80px;
}

http://jsfiddle.net/a6ZjS/

正如您所看到的，如果<span>元素内的文本变长，则设计会中断。但我希望文本能够打破，而不是设计。 css中可能还有一些不必要的东西。

Answer 1

以下是解决问题的一种方法：

http://jsfiddle.net/thirtydot/a6ZjS/19/

.outer {
    display: inline-block;
    vertical-align: top;
}
.outer div {
    overflow: hidden;
}
.img {
    float: left;
}

Answer 2

您可以设置跨度的最大宽度，使它们不超过其父级（例如：max-width: 133px;）。

http://jsfiddle.net/a6ZjS/6/

此外，对于该示例中的长文本，h4标记上的边距将推出第二行文本。我只是将其设置为margin: 0px;来解决该问题。

Answer 3

为宽度和高度添加最大值应该可以解决问题。如果div太大，也会设置overflow：auto会让它滚动。

.outer div {
   display: inline-block;
   float: left;
   margin: 10px 10px 10px 0;
   background-color: red;
   overflow: auto;
   max-width: 130px;
   max-height: 80px;
}

请参阅此处的代码： http://jsfiddle.net/a6ZjS/10/

Answer 4

相对于元素宽度的填充百分比

.content{
     paddding: 30%
}

CSS宽度应该取决于父级

4 个答案: