Question

我遇到了一些麻烦，让它看起来像我想要的那样。

这是页面： https://diggardensnursery.com/shop/house-home/

我想将图像编目在左侧，右边的描述和属性，并添加到下面的购物车。

我试图将div向左和向右浮动。我不确定是否必须将图像粘贴在div中并将其单独浮动。我不太熟悉PHP，所以我一直试图搞砸CSS才能让它发挥作用。

任何帮助？

非常感谢！ ALISHA

Answer 1

在您的网站中，您有大量的东西浮动。这不是最好的方法。浮动与位置不同，所以我认为你设置为“浮动”的所有东西都不符合你的想法。你不想把东西都浮在那里，只有一件事。

在这种情况下，你唯一应该浮动的是图像，你只需要将一个对象浮动并使用它的边距和填充来排列其他所有对象。

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 */
}

第二个关闭这个浮动左边并添加一个clear：both属性;

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上的浮点数，我会添加“margin：10px 0 0 28px;”输入.wpsc_buy_button。

如果你向div.product_grid_display添加一个“clear：both”，你就不需要名为“div.grid_view_newline”的div，所以我就摆脱了它。

应该照顾它。

我希望这会有所帮助，如果您对此有任何疑问，请与我们联系，请记得提出这个答案并将此答案视为“答案”，如果这样可以解决您的问题！

感谢。

Answer 2

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

Answer 3

如果我理解你的问题，那么你需要在div中使用跨度。

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

我试图将两个div并排排列

3 个答案: