如何使浮動圖像作出反應？

請參閱this fiddle 如何使浮動圖像作出反應？

我在這個小提琴中主要關注的是div＃text和img.frame。我試圖創建一個響應式網站，但這一直是我的問題很長一段時間，我無法弄清楚如何讓img在文本旁邊行動，並在我嘗試縮小尺寸的同時響應的瀏覽器窗口。它所做的是，在它作出迴應之前，它在文本之下。有沒有解決方法？

<div id="text">This is some text this is some text this is some text</div> 
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" />

來源

2013-01-01 Ajii Noguerra

據我所知，您需要在文本旁邊有圖像，所以當您減小窗口大小時，圖像和文本行爲不會受到影響。

您需要：

做一個div容器id=img_container給予風格的寬度（假設400像素）
把你的圖片在容器內，並給予風格#img_container img{float: left}
把你的文字中AP標籤並給予風格#img_container（p或DIV），並給予風格(margin-left: same of your img width) + 10

這是完整的例子：

<style> 
    #img_container { 
     width: 400px; 
    } 
     #img_container.text { 
      margin-left: 306px; 
     } 
     #img_container img.frame { 
      float: left; 
     } 
</style> 
<div id="img_container"> 

<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" /> 
<div id="text">This is some text this is some text this is some text</div> 
</div>

來源

2013-01-01 08:25:52

我假設你正在尋找並排的文字和圖像，所以如果我錯了，請道歉。

像M. Berro，還是先把兩個元素的包含分區內部，如下：

<div id="container"> 
    <p class="text">Here's some text. This will be aligned to the left, and next to the image. It's width will change as the viewport expands or contracts.</p> 
    <img src="/image.png" title="An image, aligned right" /> 
</div>

坐在圖像和文本並排，我會使用以下CSS作爲起點：

#container {} 
#container p.text { float: left; min-width: 320px; } 
#container img { float: right; margin-left: 20px; }

在我的例子，我申請了一個浮動到兩個要素（當然，你將不得不清除浮動，以確保頁面的結構的其餘部分保持不變 - 我建議看着Clearfix，因爲它避免了任何額外的空白div）。我也給了文本一個最小寬度：這確保了文本不會收縮到一個無法閱讀的地步！

來源

2013-01-02 17:37:00

爲了您的目標，您應該使用em或％並使用內聯塊。
jsfiddle.net/geNuR/看這個的jsfiddle 不知道爲什麼我不能把代碼propely，也許論壇擋住了我們的國家））

來源

2013-01-04 15:00:30 Lucky

你可以通過添加CSS max-width: 60%;啓動在.frame。這並不完美，但是這與你試圖達到的目標相似嗎？使用javascript/jQuery可以實現更好的結果。

來源

2013-01-04 15:16:46 vortextangent

流動文本的響應圖像的關鍵是依賴於浮動。但是，關鍵在於浮動img元素，而不是文本。

首先，將img標籤文本之前，給人一種標記像這樣：

<img src="image.jpg" width="294" height="225" class="frame" /> 
<div id="text">This is some text this is some text this is some text</div>

這個順序很重要的是，IMG將浮動的權利，消除其清除堵塞區域的高度，並且文本將會在其周圍流動。

接下來，從文本中刪除浮動，允許它流動，並將浮動權應用於圖像。我也注意到，這給文字和IMG之間的保證金，保證金被應用到IMG，給你這個造型：

img { max-width: 100%; height: auto; } 

#text{ width:100px;} 

.frame { 
    float:right; 
    background: #fff; 
    padding: 6px; 
    margin-left:10px; 
    box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8); 
    -moz-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8); 
    -webkit-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8); 
}

這裏是一個jfiddle demonstration

來源

2014-02-09 23:21:33 ZacDavidM

如何使浮動圖像作出反應？

回答

相關問題