Question

我在尝试向右侧显示<div checkoutoptions和在<div productdetails左侧显示checkoutoptions时遇到一些问题

以下是现在显示的方式：

以下是我希望如何显示

看起来div checkoutoptions周围有某种包裹让我移动div productdetails up，但我不知道如何纠正这个问题。

如果您想亲眼看到，请点击链接to my website as an example。

这是我的HTML：

    <!-- Share and title/show this panel on top -->


        <div class="ProductMain" style= "float: left; "> 
            <h1 itemprop="name">%%GLOBAL_ProductName%%</h1>

            %%GLOBAL_FacebookLikeButtonAbove%%
            %%GLOBAL_FacebookLikeButtonBelow%%
            %%GLOBAL_PinterestButton%%


            <!--side panel with add to cart show this panel to the right-->

            <div id="checkoutoptions">

               %%SNIPPET_ProductAddToCartRight%%
               <div><input id="ShopButton" style="display: none";></div>


               %%SNIPPET_ProductAddToCartBelow%%
               %%Panel.SideProductAddToWishList%%


                          <div class="WishlistRow DetailRow" style="display:%%GLOBAL_HideWishlist%%">
                              <a class="WishListButton" href="javascript: void(0)">ADD TO WISHLIST</a>

                </div>

                              %%GLOBAL_AddThisLink%%

            </div>


            <!--Yotpo Reviews/ display this panel next to checkoutoptions to the left and right under ProductMain-->

            <div id="productdetails">

<div style="padding: 0px 0px 0px; width: 200px; margin: auto; height: 00px"> </div><!--yotpo product rating-->

 <div class="yotpo bottomLine"
 data-product-id="%%GLOBAL_ProductId%%"
 data-url="%%GLOBAL_ProductLink%%">
    </div> 


            <div class="ProductDetailsGrid">
                <div class="DetailRow RetailPrice" style="display: %%GLOBAL_HideRRP%%">
                    <span class="Label">%%LNG_RRP%%:</span>
                    %%GLOBAL_RetailPrice%%
                    %%GLOBAL_YouSave%%
                </div>
</div>

到目前为止，这是我的CSS：

#checkoutoptions{
    margin:auto;
    padding: 10px;
    border-radius: 5px;
    width: 310px;
    border: 1px solid gray;
}

Answer 1

在带有审核的div上切换位置，并使用产品信息切换div。结果将像

<div class="yotpo bottomLine yotpo-medium" data-product-id="705" data-url="" data-yotpo-element-id="2">
..... content
</div>
<div class="ProductDetailsGrid">
....content
</div>

应改为将

重新排列为

<div class="ProductDetailsGrid">
....content
</div>
<div class="yotpo bottomLine yotpo-medium" data-product-id="705" data-url="" data-yotpo-element-id="2">
..... content
</div>

看起来并不像你想要的那样，但我相信它非常好。

Answer 2

实际上元素的顺序/结构并不好。您应该重构html并为每个部分创建小容器。

例如。

<div class="post-meta">
   <div class="share-box">
      <div class="share-buttons"><!-- fb and pinterest buttons --></div>
      <div class="product-price-rating"><!-- item price, rating etc --></div>
   </div>
   <div class="cart-box">
       <!-- cart and other code -->
   </div>
   <div class="clearfix"></div>
</div>

现在，您可以通过floating每个框轻松实现所需的布局，并在关闭父级之前清除float。

.share-box{
  float: left;
}

.cart-box{
  float: right;
}
.clearfix{
  clear: both;
}

Answer 3

添加到您的css类：

display: inline-block;

并排显示div

3 个答案: