如何对齐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>默认情况下是块元素,因此它们将占据页面上的整个行.使用display:inline-block将使它在同一行上对齐,从而表现得像inline元素,但保留其block元素属性.

阅读有关display propertiesCss的更多信息.

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

对于包含图像的div:

display: inline-block

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

看截图: