Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
492 views
in Technique[技术] by (71.8m points)

html - 尝试水平对齐5张图像。 一幅图像不对(trying to horizontally align 5 images. One image is out of line)

The must be an easy answer.

(答案一定很简单。)

But for the life of me cannot see why.

(但是对于我的一生,看不出为什么。)

All i mm trying to do horizontally align 5 images.

(我试图将所有图像水平对齐5张。)

I can perfectly align 4 of them.

(我可以完全对齐其中的4个。)

But he first is higher than all the rest...same src code, same image same everything!!!

(但是他首先高于所有其他...相同的src代码,相同的图像,所有东西都一样!!!)

Any help much appreciated.

(任何帮助,不胜感激。)

Code:

(码:)

enter code here enter code here #gallery { enter code here float: left;

(enter code here enter code here #gallery {在此处输入代码float: left;)

enter code here width: 100%;

(在此处输入代码width: 100%;)

enter code here margin-top: -125px;

(在此处输入代码margin-top: -125px;)

enter code here margin-right: 30px;

(在此处输入代码margin-right: 30px;)

enter code here margin-left: 10px;

(在此处输入代码margin-left: 10px;)

enter code here border-right: white 1px dotted;

(在border-right: white 1px dotted;输入代码border-right: white 1px dotted;)

enter code here } enter code here #gallery img { enter code here float: left;

(在此处输入代码}在此处输入代码#gallery img {在此处输入代码float: left;)

enter code here display: inline-block;

(在此处display: inline-block;代码display: inline-block;)

enter code here margin: 0 0 100px 10px;

(在此处输入代码margin: 0 0 100px 10px;)

enter code here border: 1px solid rgb(0,0,0);

(在此处输入代码border: 1px solid rgb(0,0,0);)

enter code here } enter code here #photo { enter code here margin-left: 150px;

(在此处输入代码}在此处输入代码#photo {在此处输入代码margin-left: 150px;)

enter code here position: relative;

(在此处输入代码position: relative;)

enter code here } enter code here #photo img { enter code here position: absolute;

(在此处输入代码}在此处输入代码#photo img {在此处输入代码position: absolute;)

enter code here`}

(在此处输入代码`})

`enter code here`a {
`enter code here`outline: none;
   `enter code here` vertical-align: top;
`enter code here`}

`enter code here`a img {
`enter code here`border: 1px solid #BBB;
`enter code here`padding: 2px;
`enter code here`margin: 10px 20px 10px 0;

enter code here }

(enter code here })

`enter code here`a img.last {
`enter code here`margin-right: 0;   
`enter code here`}

enter code here`

(在此处输入代码`)

enter code here

enter code here

`enter code here`<a href="../wp-content/uploads/2019/11/slide1.png"><img src="../wp-`enter code here`content/uploads/2019/11/Blank- 
`enter code here`Person-Imagesmall1.jpg" width="100" height="100" alt="person 2"></a> 

`enter code here`<a href="../wp-content/uploads/2019/11/slide1.png"><img src="../wp-`enter code here`content/uploads/2019/11/Blank- 
`enter code here`Person-Imagesmall1.jpg" width="100" height="100" alt="person 3"></a> 

`enter code here`<a href="../wp-content/uploads/2019/11/slide1.png"><img src="../wp-`enter code here`content/uploads/2019/11/Blank- 

enter code here Person-Imagesmall1.jpg" width="100" height="100" alt="person 4">

(enter code here Person-Imagesmall1.jpg“ width =” 100“ height =” 100“ alt =” person 4“>)

`enter code here`<a href="../wp-content/uploads/2019/11/slide1.png"><img src="../wp-`enter code here`content/uploads/2019/11/Blank- 

enter code here Person-Imagesmall1.jpg" width="100" height="100" alt="person 5">

(enter code here Person-Imagesmall1.jpg“ width =” 100“ height =” 100“ alt =” person 5“>)

enter code here
  ask by Doug Pitchers translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I put br on the line above...that worked.

(我把br放在上面的那行上。)

Still not sure why I needed it though

(仍然不确定为什么我需要它)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...