如何专门对齐三个图像？ [关闭]答案

【问题标题】：How to align three images specifically? [closed]如何专门对齐三个图像？ [关闭]
【发布时间】：2012-11-19 05:51:00
【问题描述】：

我无法在页面中间对齐三张图片。

假设图片 #1 高约 500 像素，宽约 500 像素。图片 #2 和 #3 高 250 像素，宽 500 倍。我希望图像#1 位于左侧，图像#2 和#3 位于图像#1 旁边。它们之间会有一些边距，这样它们就不会彼此相邻，但现在，我需要找到一种方法来对齐它们。

------------------    -------------------
|                 |   |                 |
|                 |   |                 |
|                 |   |                 |
|                 |   |_________________|
|                 |   
|                 |   |-----------------|
|                 |   |                 |
|                 |   |                 |
-------------------   -------------------

这有意义吗...？

而且，它们不是按钮或任何东西。只是计划图像。

【问题讨论】：

图形说明会很有帮助。
忘记一个插图。 “你试过什么？”怎么样？ - 我们在这个网站上自愿生活的我们想知道我们不只是为你做你的工作。我们在这里“帮助”不仅仅是工作。
定义“对齐”...垂直、水平、沿其上/下边缘、等间距、居中、什么？
我无耻地劫持了问题来说明请求。这就是我相信OP想要的。如果我错了……对我投入一盎司的兴趣感到羞耻
@KaiQing，如果这是他要求的，那么这个问题写得比我最初想象的还要糟糕。

标签： html css alignment

【解决方案1】：

第一种方法。

如果您可以稍微更改标记，最简单的方法是为图像添加一个额外的框，该框应该在列中呈现。然后，您将更改框 display 属性，使其不会从新行开始。

.inline-block {
  display: inline-block;
}
.small {
  display: block;
}

<img src="https://picsum.photos/100/100/"/>
<div class="inline-block">
  <img class="small" src="https://picsum.photos/100/50/"/>
  <img class="small" src="https://picsum.photos/100/50/"/>  
</div>

第二种方法。

使用 CSS float 属性。 All you may ever want to know about float is in this css-tricks' post.

这就是最终的结果。

#big {
    float:left;
    margin-right:2px;
}
.small {
  display: block;
}

<img id="big" src="https://picsum.photos/100/100/"/>
<img class="small" src="https://picsum.photos/100/50/"/>
<img class="small" src="https://picsum.photos/100/50/"/>

【讨论】：

【解决方案2】：

如果只有 3 张图片，并且使用 html，则尝试左、中、右对齐，如下所示：

<img src="whatever you want" align=left height="whatever" width="whatever">
<img src="whatever you want" align=right height="whatever" width="whatever">
<img src="whatever you want" position:absolute; left:"whatever%"; top:"whatever%; height:"whatever px"; width:"whatever px";>

您还必须将宽度和高度设置为足够小的尺寸，以便所有内容都适合空间，具体取决于您的屏幕分辨率。只需尝试将图像尺寸缩小到较小的尺寸，并且可能会起作用。

【讨论】：

-1 用于使用align 属性。
很确定 align 在 html5 中无效。
我认为它在 HTML4.01 中也无效。更正：在 HTML4.01 中已弃用。
可能是真的。这是我在上面找到的第一个谷歌结果：webdesign.about.com/od/htmltags/p/blatalignmultim.htm
如果这个答案被任何活着的灵魂以某种方式接受，我担心互联网的未来！ - 对不起 user185。让我投反对票需要很多时间，但你只是不断飙升到深渊

【解决方案3】：

像这样？ http://jsfiddle.net/chmHH/

在 Chrome 中工作，尚未检查其他浏览器。

HTML（我推荐使用类名）

<div>
    <img src="http://placekitten.com/200/200"/>
    <img src="http://placekitten.com/150/200"/>
    <img src="http://placekitten.com/150/200"/>
</div>

CSS

div{
    text-align:center;
}
img{
    display:inline;
}

更新：http://jsfiddle.net/chmHH/1/

HTML

<div>
    <img src="http://placekitten.com/200/200"/>
    <img src="http://placekitten.com/200/98" class="top"/>
    <img src="http://placekitten.com/200/98" class="bottom"/>
</div>

CSS

div{
    text-align:center;
}
img{
    display:inline;
}
img.top{
    vertical-align:top;
}
img.bottom{
    vertical-align:baseline;
    margin-left:-204px;
}

【讨论】：

zzz jsfiddle.net/chmHH/3