我想在一个 div 中的同一行中对齐 3 张图片,第一张图片应完全对齐到页面的左边,第三张图片应完全对齐到页面的右边,第二张图片应完全对齐到第一张和第三张图片的中间。
我尝试了下面的代码,但效果并不理想,如何将 3 张图片对齐,并将第 2 张图片放在另外 2 张图片的正中间?
<div>
<img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" />
<div id="content" align="center">
<img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" />
</div>
<img src="@Url.Content("~/images/image3.bmp")" alt="" align="right"/>
</div>
<style type="text/css">
#content {
width:50%;
margin-left: auto ;
margin-right:auto ;
}
方案 1:
不要将图片放在 div 中,而是将每张图片放在一个 span 中。
将第一张和第二张图片浮动到左侧。
为第二张图片添加一些左填充。
将右边的图片浮动到右边。
请务必记住在所有图片的父
overflow:hidden
,因为使用浮动图片会产生一些副作用。
方案 2(首选):
这将是确保第二张图片始终居中对齐的最佳方法,而无需担心表格的确切宽度。
如下所示:
<table width="100%" border="0">
<tr>
<td><img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" /></td>
<td><img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" /></td>
<td><img src="@Url.Content("~/images/image3.bmp")" alt="" align="right"/></td>
</tr>
</table>
这应该是你的答案
<div align="center">
<img src="@Url.Content("~/images/image3.bmp")" alt="" align="right" style="float:right"/>
<img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" style="float:left" />
<div id="content" align="center">
<img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" />
</div>
</div>
我假定第一个 DIV 是 #content
:
<div id="content">
<img src="@Url.Content("~/images/image1.bmp")" alt="" />
<img src="@Url.Content("~/images/image2.bmp")" alt="" />
<img src="@Url.Content("~/images/image3.bmp")" alt="" />
</div>
和 CSS :
#content{
width: 700px;
display: block;
height: auto;
}
#content > img{
float: left; width: 200px;
height: 200px;
margin: 5px 8px;
}