我想並排對齊兩個div

我遇到了一些CSS問題，讓它看起來像我想要的樣子。我想並排對齊兩個div

這裏是頁： https://diggardensnursery.com/shop/house-home/

我想目錄圖像出現在左側，與描述的權利和屬性，並添加到以下車。

我試着將div浮動到左側和右側。我不確定是否必須將圖像粘貼到div中並將其分開放置。我對PHP不太熟悉，所以我一直在試圖混淆CSS才能使它工作。

任何幫助？

非常感謝！ Alisha

來源

2010-09-21 slaughter

在您的網站，你有很多東西漂浮。這不是最好的辦法。浮動與位置不同，所以我認爲你所設定的「浮動 - 正確」的所有東西都不符合你的想法。你不想在所有地方漂浮東西，只是一件事。

在這種情況下，你應該浮動的唯一東西就是圖像，你只需要將一個對象浮起來，並使用邊緣和填充來排列其他所有東西。

This is a good reference這應該可以幫助你更好地控制浮動。

至於固定您的頁面：

首先，你需要離開圖像浮動。把足夠的填充放在右邊，如果有必要的話，在上面/下面放上很多填充物，使東西不會包裹在圖像下面。

div.product_grid_display div.product_grid_item img { 
    border:medium none !important; 
>>> float:left; 
>>> padding:0 20px 35px 0; /*this padding worked for me */ 
}

第二次關閉此浮動左側，並添加一個清除：兩個屬性;

div.product_grid_item { 
>>> float:left; /*DELETE THIS LINE*/ 
    height:auto !important; 
    margin:4px 8px 8px 0; 
    position:relative; 
    clear:both; 
}

關閉上div.grid_product_info，div.product_text浮動，並input.wpsc_buy_button還有，我還要加上「保證金：10px的0 0 28px;」到input.wpsc_buy_button。

如果您向div.product_grid_display添加「clear：both」，則不需要名爲「div.grid_view_newline」的div，因此我會擺脫它。

這應該照顧它。

我希望這可以幫助，請讓我知道如果您有任何其他問題，並請記住要upvote這個答案，並檢查此答案爲「答案」，如果這能解決您的問題！

謝謝。

來源

2010-09-21 01:45:53 Andrew

非常感謝您的幫助。仍在努力，但它讓我更加接近。 – slaughter 2010-09-21 05:39:23

使用「float：left;」例如：http://www.citiport.net/Sandbox/Jeff/pictureBorder.html

來源

2010-09-21 01:47:57 jebberwocky

如果我理解你的問題，那麼你需要在div中使用跨度。

<div> 
    <span>image</span> 
    <span>description</span> 
</div> 
<div> 
    <span>buttons</span> 
</div>

來源

2010-09-21 02:16:43 dwhittenburg

我想並排對齊兩個div

回答

相關問題