简体   繁体   中英

How to move an image in html & css

I'm using embedded images from Getty images, i want to move on picture to be below the other one.

Here is the code for the first image

 <div class="getty embed image" style="background-color:#fff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#a7a7a7;font-size:11px;width:100%;max-width:506px;"> <div style="padding:0;margin:0;text-align:left;"> <a href="http://www.gettyimages.com/detail/73667906" target="_blank" style="color:#a7a7a7;text-decoration:none;font-weight:normal !important;border:none;display:inline-block;">Embed from Getty Images</a> </div> <div style="overflow:hidden;position:relative;height:0;padding:66.403162% 0 0 0;width:100%;"> <iframe src="//embed.gettyimages.com/embed/73667906?et=x-Pax92QRbhQPd71Hr6VwA&tld=com&viewMoreLink=on&sig=_RFZUtF6qBuiB6YWp3Ycrg9GFwMLvAYqV15y4_Cjejk=&caption=true" width="506" height="336" scrolling="no" frameborder="0" style="display:inline-block; position:absolute; top:0;left:0;width:100%; height:100%; margin:0;" ></iframe> </div> <p style="margin:0;"></p> </div> 

Here is the code for the second image

 <div class="getty embed image" style="background-color:#fff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#a7a7a7;font-size:11px;width:100%;max-width:478px;"> <div style="padding:0;margin:0;text-align:left;"> <a href="http://www.gettyimages.com/detail/500284629" target="_blank" style="color:#a7a7a7;text-decoration:none;font-weight:normal !important;border:none;display:inline-block;">Embed from Getty Images</a> </div> <div style="overflow:hidden;position:relative;height:0;padding:75.104603% 0 0 0;width:100%;"> <iframe src="//embed.gettyimages.com/embed/500284629?et=97hObt6TTeV4YPmb9EWgpA&tld=com&viewMoreLink=on&sig=6orn1zgKVOtb4oFXLEM8vZ1xArk_b24dCn9H2L6Qzz4=&caption=true" width="478" height="359" scrolling="no" frameborder="0" style="display:inline-block; position:absolute; top:0;left:0; width:100%; height:100%; margin:0;" ></iframe> </div> <p style="margin:0;"></p> </div> 

A very simple way to do this is to add the: <br> html tag between the divs containing the images. This will place a line break between the images.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM