如何使两个并排对齐？ [英] How to make two div align side by side?

问题描述

我一直试图让两个div并排浮动，或者基本上是购物车和物品（即jcart和cartbox），但似乎无法得到它。这里是演示：链接

我试过改变 float：right; 在cartbox css上，但只会将购物车移到右侧，如果我删除cartbox css上的浮动块。购物车和项目并排排列但由于某些原因，购物车显得非常小，添加到购物车按钮似乎不会点击。任何帮助将不胜感激！

HTML：

 < form method =postaction =class =jcart> 
< fieldset> 
 //此处的商品详情
< / fieldset> 
< / form> 
 
< div class ='cartbox'> 
< div id =jcart><？php $ jcart-> display_cart（）;？>< / div> 
< div id ='jcart-loader'>< img src ='img / ajax-loader.gif'alt =''>< / div> 
< / div> 
  

CSS：

  #jcart {
 position：relative; 
 font-size：1.15em; 
 top：0; 
保证金：0 0 .75em; 
} 
 
 .jcart {
 width：135px; 
 margin：0 20px 20px 0; 
 padding-top：20px; 
 border：固体2px＃E5E5E5; 
 float：left; 
背景：＃F0F0F0; 
 text-align：center; 
} 
 
 .cartbox {
 float：left; 
职位：亲属; 
 top：0; 
 width：500px; 
保证金：0; 
 padding：0; 
 
  

解决方案

您需要添加<$ div 元素的默认样式为 display：inline-block c $ c> display：block ，这意味着它们将垂直堆叠，而不是水平堆叠（不是你想要的行为）。

它;购物车框太宽以致不能在内容容器中并排安装。使用ID 中心更宽的div（可能为1000px而不是960px），并添加更改显示属性，应该这样做。

根据代码，您需要直接编写代码才能更改它，请执行以下操作：

  #centre {
 width：1000px; 
} 
 
 .cartbox {
 display：inline-block; 
} 
  

编辑：我在本地修改了您网站的这些更改， 。

I have been trying to make two divs float side by side or basically the shopping cart and the items (namely jcart and cartbox) but cant seem to get it. Here is the demo: link

i tried change float:right; on the cartbox css but that would only move the shopping cart to the right and if I remove the float on the cartbox css.. The cart and the items align side by side but for some reason cart appears to be really small and the "add to cart" button doesn't appear to click. Any help will be appreciated!

HTML:

  <form method="post" action="" class="jcart">
    <fieldset>
      // item details here
    </fieldset>
  </form>

  <div class='cartbox'>
    <div id="jcart"><?php $jcart->display_cart();?></div>
    <div id='jcart-loader'><img src='img/ajax-loader.gif' alt=''></div>
  </div>

CSS:

#jcart {
position:relative;
font-size:1.15em;
top:0;
margin:0 0 .75em;
}

.jcart {
width:135px;
margin:0 20px 20px 0;
padding-top:20px;
border:solid 2px #E5E5E5;
float:left;
background:#F0F0F0;
text-align:center;
}

.cartbox {
float:left;
position:relative;
top:0;
width:500px;
margin:0;
padding:0;
}

解决方案

You need to add display: inline-block on the elements you wish to align side by side, as div elements have a default style of display: block, meaning they will stack vertically instead of horizontally (not the behaviour you want).

From the looks of it; the shopping cart box is too wide to fit side by side in the content container as well. Make the div with the id centre wider (possibly to 1000px instead of 960px), and coupled with the addition of changing the display property, that should do it.

In terms of the code you need to write directly in order to get this to change, do the following:

#centre {
    width: 1000px;
}

.cartbox {
    display: inline-block;
}

EDIT: I modified these changes to your website locally and it appears to have worked.

这篇关于如何使两个并排对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！