0

我有 2 个东西共享部分 - 一个由文本组成的标题和一个浮动到其右侧的图像。我希望图像宽度始终为 308px，并根据文本长度的需要裁剪其高度。我对为 .location 设置固定高度不感兴趣，因为内容长度可能会改变。如何才能做到这一点？（谢谢！）

的HTML：

<section class="location">
<img src="http://evinwolverton.com/img/disc.jpg">
<header>
    <h2>This Is A Headline</h2>
    Etiam porta sem malesuada magna<br/> 
        Mollis euismod. Duis mollis<br/>
        Est non commodo luctus, nisi erat<br/>
        Porttitor ligula, eget lacinia odio<br/>
        Sem nec elit.
</header>
 </section>

CSS：

.location {
    border: 2px solid #ccc;
    overflow: hidden;
    width: 620px;
    color: #666;
    margin: 40px 0;
}

.location header {
    float: left;
    padding: 25px;
    width: 258px;
}

.location h2 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
    color: #333;
}   

.location img {
    float: right;
    width: 308px;
}
4

3 回答 3

2

使用背景图像的替代解决方案，如果您希望这是一个实际的<img>标签，则可以.location相对定位，保持溢出隐藏在这里并给图像一个绝对位置。您可能还需要在文本支架上提供一些边距，以确保它不会落后于图像。

.location {
    position: relative;
    overflow: hidden;
}
.location img {
    position: absolute;
    top: 0px;
    right: 0px;
}
于 2013-03-26T23:15:36.297 回答
0

最简单的方法是使用background-image与右上角对齐的no-repeat.

于 2013-03-26T23:13:38.443 回答
0

如果您的图像不需要是img标签，您可以将其作为背景图像应用到您的标题。但我假设情况并非如此。

尝试：

.location img {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
}

http://www.w3schools.com/cssref/pr_pos_clip.asp

[编辑]

抱歉，尝试一下clip: rect(0px, 308px, 100%, 0px);，我很确定您需要将图像浮动在标题中。

于 2013-03-26T23:13:43.470 回答