我想并排对齐两个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

回答

相关问题