3

我想在 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 ;


 }
4

5 回答 5

5

现代方法：flexbox

只需将以下 CSS 添加到容器元素（此处为div）：

div {
  display: flex;
  justify-content: space-between;
}


div {
  display: flex;
  justify-content: space-between;
}
<div>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</div>

旧方式（适用于古代浏览器 - 在 flexbox 之前）

text-align: justify;在容器元素上使用。

然后将内容拉伸到 100% 宽度

标记

<div>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</div>

CSS

div {
    text-align: justify;
}

div img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

div:after {
    content: '';
    display: inline-block;
    width: 100%;
}


div {
    text-align: justify;
}

div img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

div:after {
    content: '';
    display: inline-block;
    width: 100%;
}
<div>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</div>

于 2013-07-02T09:29:49.697 回答
2

  • 选项1：

    • 与其将图像放在 div 中，不如将它们中的每一个放在一个跨度中。
    • 将第一张和第二张图片浮动到左侧。
    • 给第二张图像一些左填充。
    • 将正确的图像浮动到右侧。

永远记得添加overflow:hidden到所有图像的父级（如果你有一个），因为使用带有图像的浮动有一些副作用。

  • 选项 2（首选）：

    • 将所有图像放在一个边框=“0”的表格中。
    • 使表格的宽度为 100%。

这将是确保第二张图像始终与中心对齐的最佳方式，而无需担心表格的确切宽度。

如下所示：

<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>
于 2013-07-02T09:08:19.370 回答
2

HTML：

<div class="container">
    <span>
        <img ... >
    </span>
    <span>
        <img ... >
    </span>
    <span>
        <img ... >
    </span>
</div>

CSS：

.container{ width:50%; margin:0 auto; text-align:center}
.container span{ width:30%; margin:0 1%;  }

我还没有测试过这个，但希望这会奏效。

您可以将 'display:inline-block' 添加到 .container span 以使 span 具有固定 30% 的宽度

于 2013-07-02T11:01:38.513 回答
1

这应该是你的答案

<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>
于 2013-07-02T07:35:26.197 回答
0

我假设第一个 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;
     }
于 2013-07-02T07:40:24.440 回答