垂直對齊圖片和文字

如何我可以對齊圖片和文字水平沒有像下移動的其他文字垂直對齊圖片和文字

我喜歡做這個（樣品XXXXX是一個大的圖像）

XXXXXXXX This is a big image. 
XXXXXXXX all text should not goes 
XXXXXXXX down the image 
XXXXXXXX

但問題是我的文字下降了圖像

XXXXXXXX This is a big image. 
XXXXXXXX 
XXXXXXXX 
XXXXXXXX 
all text should not goes down the image

請幫助我。

這裏是我的代碼

<div id = 'wrap'> 
    <div class='image'> 
    <img src="/test/1.jpg" /> 
    This is a big image all text should not goes down the image 
    </div> 
    <div class='image'> 
    <img src="/test/2.jpg" /> 
    This is a big image all text should not goes down the image 
    </div> 

</div>

CSS，我用...

#wrap { 
    overflow: auto; 
    height: 300px; 
} 

.image{ 
    border-top-style:outset; 
} 

#wrap > div > img { 
    width : 80px; 
    height : 70px; 
    margin-left:5px; 
    margin-top:5px; 
    margin-bottom:5px; 
    padding-bottom: 4px; 
    float:left; 
    clear:left; 
}

來源

2013-02-08 user2054091

無論寫一個兩列layour（圖片|文本），或者只是漂浮在圖像向左帶線的CSS：'浮動：左;'。這允許文本在足夠長的時間內使用圖像下的空間。 – amon 2013-02-08 11:21:04

圖像只是浮到左

img { 
    float: left; 
}

浮動的圖像後會發生什麼左邊是它將在右側創建一個空白區域，以便文本將按照您的需要進行設置。

注意：不要忘了清除漂浮...你可能也想換這個了一個div容器內

休息：

你可以給你想要的IMG給類浮動，所以而不是使用img{float: left;}你應該使用img.class_name {float: left;}，以便它將精確的目標圖像，也可能想要結束p元素內的文本作爲Sam Carrington告訴你，這樣你可以填充文本，也風格它.. 。

Demo Fiddle

HTML

<div class="wrapper"> 
    <img class="to_the_left" src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /> 
    <p class="paragraph">Hi this is big long text I want to place it to the right of my image</p> 
    <div class="clear"></div> 
</div>

CSS

.wrapper { 
    border: 1px solid #f00; 
} 

.to_the_left { 
    float: left; 
} 

.clear { 
    clear: both; 
} 

p.paragraph { 
    padding-top: 30px; /* You can set accordingly */ 
}

來源

2013-02-08 11:20:55

唉，打我吧。你也可以使用'display：inline-block;'，但是'float：left;'是首選。 – tkbx 2013-02-08 11:22:30

好吧我會試試看，並讓你知道..typ – user2054091 2013-02-08 11:23:56

@tkbx看看http://www.ternstyle.us/blog/float-vs-inline-block :) – 2013-02-08 11:24:20

你應該總是包含在語義元素在div的文本 - 這將有利於讓您針對文本的優勢在一個獨特的容器使用CSS。

<div class='image'> 
    <img src="/test/1.jpg" /> 
    <p class="sidebar">This is a big image all text should not goes down the image</p> 
</div>

來源

2013-02-08 11:26:05

我試過使用float但問題是所有文本都沿着圖像 – user2054091 2013-02-08 11:39:38

#wrap .image img { float: left; width: 200px;}

來源

2013-02-08 11:30:17 Kingk

試圖使用float但問題是所有文本都沿着圖像 – user2054091 2013-02-08 11:40:09

然後檢查圖像的寬度並用上面的代碼添加寬度。 – Kingk 2013-02-08 11:58:51

垂直對齊圖片和文字

回答

相關問題