javascript - 如何对齐div元素？

Question

我正在尝试制作一个关于产品详细信息的 jsp 页面。我对 CSS 有点陌生，所以我无法并排对齐 div 元素。

.nav {
  float: right;
}
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #F2EEE9;
  font: normal 13px/1.5 Georgia, Serif;
  color: #333;
}
.item {
  background-color: #fff;
  position: relative;
  margin: 30px auto 30px auto;
  width: 978px;
}
.item img {
  display: block;
  margin: auto;
}

<div class="item">
  <div style="background: url(http://placehold.it/370x330); height: 370px; width: 330px;"></div>
    <div class="pdetails">
        </div>
</div>

我想在图像框的右侧添加一个 div 元素，但我无法执行。

Answer 1

使用 style="display:inline-block"与 div。

这是因为<div>默认情况下是 block 元素，因此它们将占据页面上的整行。使用 display:inline-block将使它对齐在同一条线上，因此表现得像 inline元素但保留其 block元素属性。

阅读更多关于 display properties 的信息在 Css 中。

编辑:根据问题添加以下样式(虚拟值相应更改):

对于包含图片的div:

display: inline-block

.pdetails {
  height: 370px;
  width: 330px;
  display: inline-block;
}

看截图: