问题描述
我正在尝试在产品详细信息上创建一个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元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!