如何使两个div并排排列？ [重复]

时间：2021-03-08 06:06:51

This question already has an answer here:

这个问题在这里已有答案：

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

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

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!

我试过改变浮动：对;在cartbox css但只会将购物车移到右边，如果我移除了cartbox css上的浮动..购物车和物品并排排列但是由于某种原因，购物车看起来很小并且“添加”购物车“按钮似乎没有点击。任何帮助将不胜感激！

HTML:

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:

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

4 个解决方案

#1

9  

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

您需要在要并排排列的元素上添加display：inline-block，因为div元素具有默认的display：block形式，这意味着它们将垂直堆叠而不是水平堆叠（不是您想要的行为）。

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.

从它的外观;购物车盒太宽，也不能并排放在内容容器中。使id中心的div更宽（可能为1000px而不是960px），再加上更改显示属性，应该这样做。

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.

编辑：我在本地修改了这些更改到您的网站，它似乎工作。

如何使两个div并排排列？ [重复]

#2

2  

add float:left to your css code in #jcart:

将float：left添加到#jcart中的css代码：

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

#3

1  

You can use display property to inline or inline-block as @Sam Holmes said

@Sam Holmes说，您可以使用display属性进行内联或内联阻止

or you can do something using float. like this:

或者你可以使用浮点数做一些事情。喜欢这个：

.cartbox div{
    float:left;
}

or

要么

.cartbox div{
     display:inline;// or display:inline-block;
}

here is the Demo

这是演示

#4

1  

It is because you don't have enough space in the parent Divs. I tried to set it to 10px and it allinged fine.

这是因为您在父Div中没有​​足够的空间。我试着将它设置为10px并且它很好。

#1

9  

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

您需要在要并排排列的元素上添加display：inline-block，因为div元素具有默认的display：block形式，这意味着它们将垂直堆叠而不是水平堆叠（不是您想要的行为）。

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.

从它的外观;购物车盒太宽，也不能并排放在内容容器中。使id中心的div更宽（可能为1000px而不是960px），再加上更改显示属性，应该这样做。

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.

编辑：我在本地修改了这些更改到您的网站，它似乎工作。

如何使两个div并排排列？ [重复]

#2

2  

add float:left to your css code in #jcart:

将float：left添加到#jcart中的css代码：

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

#3

1  

You can use display property to inline or inline-block as @Sam Holmes said

@Sam Holmes说，您可以使用display属性进行内联或内联阻止

or you can do something using float. like this:

或者你可以使用浮点数做一些事情。喜欢这个：

.cartbox div{
    float:left;
}

or

要么

.cartbox div{
     display:inline;// or display:inline-block;
}

here is the Demo

这是演示

#4

1  

It is because you don't have enough space in the parent Divs. I tried to set it to 10px and it allinged fine.

这是因为您在父Div中没有​​足够的空间。我试着将它设置为10px并且它很好。

标签：

相关文章