并排显示div

Question

I am having some issues trying to display my <div checkoutoptions to the right and my <div productdetails to the left of checkoutoptions

Here is how it is displaying now :

Here is how I would like it to display

It looks like there is some kind of wrapping around the div checkoutoptions that won't let me move the div productdetails up but I have not idea how to correct the issue.

Here is a link to my website as an example if you would like to see it first hand.

Here is my 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>

Here is my CSS so far:

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

Answer 1

Switch place on the div with review and the div with product info. Result will be like

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

should instead be rearranged to

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

Doesn't look exactly like you wished for, but I believe it's quite good.

Answer 2

Actually the order/structure of elements is not good. You should restructure your html and create small containers for each section.

For example.

<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>

Now you can easily achieve the layout you want by floating each box and clearing float before closing parent.

.share-box{
  float: left;
}

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

Answer 3

添加到您的CSS类：

display: inline-block;