將圖片下方的文字與圖片寬度對齊

我使用CSS將兩張圖片並排排列，每張圖片下方有一些文字。我試圖使圖片下面的文本能夠證明圖片的寬度，而不管圖片的大小如何。但是，我得到的結果是兩個文本塊重疊。例如，我希望它看起來像：將圖片下方的文字與圖片寬度對齊

****************  *************** 
* Image  *  * Image * 
*    *  *    * 
****************  *************** 
Lorem ipsum dolor  Lorem ipsum dolor 
sit amet,    sit amet, 
consectetuer   consectetuer 
adipiscing    adipiscing 
elit, sed diam   elit, sed diam

但我不能讓圖像下的文本來證明，而是它們重疊。我也希望它在頁腳之前（頁腳之前的頁面上的最後一個元素），但頁腳也與一些文本重疊。這裏是我的代碼：

HTML：

<div class="container"> 
      <div class="img"> 
      <img src="flower1small.jpg" alt="flower"> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
      </div> 

      <div class="image"> 
      <img src="flower1small.jpg" alt="flower"> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
      </div> 
     </div>

而CSS：

.container{ 
    margin-top: 15%; 
    margin-left: 10%; 

} 

.img { 
    width:800px; 

    margin-left:auto; 
    margin-right:auto; 
    position: absolute; 

} 
    .image { 
    width:800px; 

    margin-left:auto; 
    margin-right:auto; 
    position: relative; 

} 


div.img p{ 
    text-align: justify; 
    display: block; 
    width:800px; 


} 

.bottom{ 
    padding: 15px; 
} 

footer{ 
    background: #660000; 
    position:absolute; 
     bottom:0; 
    width: 85%; 
    height:100px; 
    margin-right: 10%; 
    margin-left: 10%;   
} 

footer a{ 
    color: #ffffff; 
    text-decoration: none; 
    font-size: 10px; 

} 

footer label{ 
    color: #ffffff; 
    font-size: 10px; 

}

我能做些什麼，使之正確對齊？任何幫助將不勝感激。提前致謝。

來源

2014-03-07 Rebecca

JSfiddle請 –

這裏是JSFiddle的鏈接。 http://jsfiddle.net/Fr35K/小提琴不顯示頁腳重疊的一些文字。但是當我在瀏覽器中運行項目時，頁腳與文本重疊。我用Chrome和最新版本的IE測試了它。 – Rebecca

首先，它們被設置爲800px寬，所以你的屏幕必須是1600px寬，纔可能彼此相鄰。如果這是正確的，請取下絕對位置並將.img類設置爲float：left – Ted

你的意思是這樣的：Example Fiddle？

您將不得不爲.img元素設置最大寬度。我使用了一個最大寬度爲250像素，寬度爲200像素的圖像。此外，您需要浮動它們並應用一個清晰的修補程序，以便頁腳正確定位。頁腳需要擺脫position: absolute。

整個.img元素只是使用文本的圖片寬度是不可能沒有JavaScript，所以你將不得不通過CSS設置寬度。

.container{ 
    margin-top: 15%; 
    margin-left: 10%; 
display: block; 
} 

.img { 
    max-width:250px; 
    float: left; 
    margin: 0 5%; 
} 

.img img { 
    margin: 0 auto; 
    display: block; 
} 

.img p{ 
    text-align: justify; 
    width:250px; 
    display: block; 
} 

.bottom{ 
    padding: 15px; 
} 

footer{ 
    background: #660000; 
    width: 85%; 
    height:100px; 
    margin-right: 10%; 
    margin-left: 10%;   
} 

footer a{ 
    color: #ffffff; 
    text-decoration: none; 
    font-size: 10px; 

} 

footer label{ 
    color: #ffffff; 
    font-size: 10px; 

} 

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
* html .clearfix    { zoom: 1; } /* IE6 */ 
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

來源

2014-03-07 15:33:31 Sebsemillia

我學到了一些新東西，像魅力一樣運作。太感謝了！ – Rebecca

歡迎您！快樂編碼;） – Sebsemillia

由於這兩個元素都在一個容器內。您可以輕鬆地將容器子元素的百分比設置爲相同的百分比。這樣圖像和段落將始終是相同的寬度，不管你的容器大小是多少。

EX: 
.image img, .image p { width: 90% }

來源

2014-03-07 15:38:52

將圖片下方的文字與圖片寬度對齊

回答

相關問題