文本漂浮在旁邊的圖像

塊我想實現以下位置：下一個圖像文本漂浮在旁邊的圖像

兩個不同的文本（塊）浮動/直列。（div中的所有內容）。

我一直在嘗試不同的顯示設置（塊+內聯文本等），但它仍然無法正常工作。

enter image description here

HTML：

<div class="res"> 
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/> 
<span>TITLEe</span> 
<span>Description</span> 
</div>

CSS：

.res { 

    height:60px; 
    background-color:yellow; 
    border-bottom:1px solid black; 
    text-align:left; 

} 

.res img { 

    margin-top:8.5px; 
    margin-left:5px; 
    display:inline 
} 

.res span { 

    display:block; 
}

來源

2012-08-07 John

什麼如果'元素描述'文本超出了th，就會發生圖像元素的底部？ – 2012-08-07 11:56:40

你試過了什麼？在這裏分享你的代碼。 – 2012-08-07 11:56:58

請添加您的HTML。 – Narendra 2012-08-07 11:58:43

HTML：

<div class="content"> 
    <img src="http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png"/ alt="" > 
    <h3>Title</h3> 
    <p>Some Description</p> 
</div>

CSS：

.content { 
    width: 400px; 
    border: 4px solid red; 
    padding: 20px; 
    overflow: hidden; 
} 

.content img { 
    margin-right: 15px; 
    float: left; 
}

來源

2012-08-07 12:04:27

Thnak你，它的工作原理就像我想:) – John 2012-08-07 12:07:36

不客氣。如果你認爲這是根據你的要求，那麼不要忘記接受它;-) – 2012-08-07 12:08:53

超級有用，超級簡單。我的弱智大腦一直想把*文本*留下來，而不是圖像。這個簡單的例子是一個額頭 - sla子手！ *當然*圖像應該接收浮點數，而不是文本！謝謝你的優雅迴應。 – 2015-07-15 22:24:26

試試這個.....應該工作

HTML：

<div id="testDiv"> 
    <div class="imgContainer"><img src="path/image.jpg" /></div> 
    <div class="textContainer"></div> 
</div>

CSS：

#testDiv { float:left; width: 360px; } 
#testDiv .imgContainer { float:left; width:120px; height:90px; } 
#testDiv .textContainer { float:left; width:240px; height:90px; overflow:hidden }

來源

2012-08-07 12:00:20

Your code'not shown as I answers，so I did not not in your way ... – 2012-08-07 12:02:17

沒問題，它工作完美:) – John 2012-08-07 12:05:45

我認爲你需要以下條件：

HTML：

<div class="wrap"> 
    <img src="img.jpg" class='left;' /> 
    <h1 class='right'>TITLE</h1> 
    <div class='right'>Element description</div> 
</div>

CSS：

.wrap { width: 600px; /* Just a sample value */ } 
.left { width: 200px; float: left; } 
.right { margin-left: 220px; width: 380px;}

這應該做的伎倆。根據您的需要調整寬度和邊距參數。

來源

2012-08-07 12:01:28 DerWaldschrat

好，你可以使用表格嘗試雖然不建議使用表格佈局的經典方式

<table> 
    <tr> 
    <th><img src="yourimage" /> </th> 
    <th >adsasd<br/>adas</th> 
    </tr> 
</table>

來源

2012-08-07 12:04:12 Neji

我想實現它，而不使用表，謝謝反正:) – John 2012-08-07 12:06:33

請不要使用表格風格。 – Dementic 2015-11-03 15:50:45

嗨爲什麼用於fl燕麥根據你的設計左邊你可以做到這一點，而不使用float像這樣

<div class="res"> 
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/> 
<div class="text"><h5>TITLEe</h5> 
    <p>Description</p></div> 
</div>

的CSS

.res { 
    height:60px; 
    background-color:yellow; 
    border-bottom:1px solid black; 
} 
img, .text{ 
vertical-align:top; 
} 
.text{ 
display:inline-block; 
} 
p, h5{ 
margin:0; 
    padding:0; 
}

Live demo

，並改變CSS，類

來源

2012-08-07 12:10:11

文本漂浮在旁邊的圖像

回答

相關問題