html - 如何让两个div并排对齐?

标签 html css

<分区>

我一直在尝试让两个 div 并排 float ,或者基本上让购物车和商品(即 jcart 和 cartbox) float ,但似乎无法实现。这是演示:link

我尝试更改购物车 css 上的 float:right; 但这只会将购物车向右移动,如果我删除购物车 css 上的 float 。购物车和元素对齐并排但由于某种原因,购物车看起来非常小,“添加到购物车”按钮似乎没有点击。任何帮助将不胜感激!

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

最佳答案

您需要在要并排对齐的元素上添加 display: inline-block,因为 div 元素的默认样式为 display: block ,这意味着它们将垂直堆叠而不是水平堆叠(不是您想要的行为)。

从外观上看;购物车框太宽,无法并排放置在内容容器中。使 id centre 的 div 更宽(可能到 1000px 而不是 960px),再加上更改 display 属性,应该可以做到。

就您需要直接编写的代码而言,以便对此进行更改,请执行以下操作:

#centre {
    width: 1000px;
}

.cartbox {
    display: inline-block;
}

编辑:我在本地修改了对您网站的这些更改,它似乎有效。

enter image description here

关于html - 如何让两个div并排对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23850525/

相关文章:

css - Clearfix 类有问题

css - 更改 'ant design'中的箭头图标

html - 你如何延迟 z-index 转换?

javascript - 更新 API 字符串

javascript - 使用 AngularJS 导航字符串的 "DOM",就像它是 html 一样

php - sifr 在浏览器中不工作,但可以在 Dreamweaver 预览中看到它

html - 使第二个表格行中的单元格宽度等于第一个表格行中的单元格宽度?

html - 尝试水平放置三个 <ul> 元素

javascript - 如何使用 createElement() 重新创建整个 div

python - 无法与 Eel 一起使用窗口大小和应用程序选项