如何对齐div元素? [英] How to align div elements?

问题描述

我正在尝试在产品详细信息上创建一个jsp页面.我对CSS有点陌生，因此无法将div元素并排对齐.

I am trying to make a jsp page on product details. I'm a bit new to CSS so I am unable to align the div elements side by side.

.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元素，但是我无法做到这一点.

I want to add a div element on the right side of the image box but I am unable to do it.

推荐答案

在div中使用style="display:inline-block".

这是因为<div>在默认情况下是块元素，因此它们将占据页面上的整个行.使用display:inline-block将使其在同一行上对齐，因此其行为类似于inline元素，但保留其block元素属性.

This is because <div> are block elements by default so they will take the whole of the row on the page. Using display:inline-block will make it align on the same line thus behaving like inline element but retaining its block element properties.

阅读有关CSS中display properties的更多信息.

Read more about display properties in Css.

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

As per the question add the following styles(dummy values change accordingly):

对于包含图片的div:

For the div containing image:

display: inline-block

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

查看屏幕截图:

这篇关于如何对齐div元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！