如何防止文本在文本高度超出圖像高度時低於圖像？

我使用以下命令在左側顯示圖像，並在圖像的右側顯示任何相關信息。在描述，地址和其他信息超出圖像高度的某些情況下，文本會在圖像下方顯示。我的問題是，我應該如何保持文字不在圖像下方，而是像列一樣繼續？如何防止文本在文本高度超出圖像高度時低於圖像？

.eventphoto 
{ 
    padding:1px; 
    width:200px; 
    float:left; 
    margin-right:15px; 
    border-radius:2px; 
} 
.desc 
{ 
    font-size:0.8em; 
    line-height:13pt; 
} 


<div class="desc"> 

<img class="eventphoto" src=""> 

<div style="float:left;"> 
<p>DESCRIPTION</p> 
. 
. 
. 
</div> 
</div>

來源

2013-07-22 EnexoOnoma

typo - cstyle？ –

我們可以在某處查看呈現的頁面嗎？ –

@LeeTaylor是的，很抱歉糾正了它 – EnexoOnoma

這是一個相當標準的構建體：media object

在你的情況，如果我們增加像這樣妮可的風格：

<style> 
    .eventphoto 
    { 
    padding:1px; 
    width:200px; 
    margin-right:15px; 
    border-radius:2px; 
    } 
    .desc 
    { 
    font-size:0.8em; 
    line-height:13pt; 
    } 

    .media {margin:10px;} 
    .media, .bd {overflow:hidden; _overflow:visible; zoom:1;} 
    .media .img {float:left; margin-right: 10px;} 
    .media .img img{display:block;} 
    .media .imgExt{float:right; margin-left: 10px;} 
</style>

（將格式保留爲原始類別），然後在圖像上添加適當樣式的包裝：

<div class="desc media"> 

    <div class="img"> 
    <img class="eventphoto" src="http://placekitten.com/100/100"> 
    </div> 

    <div class="bd"> 
    <p>DESCRIPTION</p> 
    <p> ... </p> 
    </div> 
</div>

一切正常。以CodePen爲例：http://codepen.io/paulroub/pen/JDsKa

來源

2013-07-22 01:58:45

嘗試浮動：左圖像上浮動：右像文本：

.eventphoto 
{ 
    padding:1px; 
    width:200px; 
    float:left; 
    margin-right:15px; 
    border-radius:2px; 
} 
.desc 
{ 
    font-size:0.8em; 
    line-height:13pt; 
    float:right; 
}

來源

2013-07-22 01:48:38

我覺得overflow: hidden;是你最好的選擇。下面是它的使用演示：

http://jsbin.com/owesiw/1/edit

來源

2013-07-22 01:49:55

如何防止文本在文本高度超出圖像高度時低於圖像？

回答

相關問題