-3

我无法在页面中间对齐三个图像。

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

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

那有意义吗...？

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

4

3 回答 3

2

像这样？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;
}
​
​
于 2012-11-30T23:59:02.783 回答
1

第一种方法。

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

.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>

第二种方法。

使用 CSSfloat属性。您可能想知道的关于 float 的所有信息都在这个 css-tricks 的帖子中。

这就是最终的结果。

#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/"/>

于 2012-12-01T00:04:34.903 回答
-3

如果只有 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";>

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

于 2012-12-01T00:06:54.343 回答