并排对齐两个图像
[英]Align two images side by side
问题描述
I want to arrange the two images in my HTML page side by side. 
我想将两个图像并排放置在HTML页面中。
- I want the images to stay side by side even if the page size changes. 我希望图像即使页面大小发生变化也可以并排放置。
- I also want the second image to span the entire header of the page ie. 我也希望第二个图像跨越页面的整个标题，即。 all the space left after the first image. 第一张图片后剩余的所有空间。 The images here are of different size. 这里的图像大小不同。
For now, I have arranged two images side by side, but when I change the size of the page, the image wraps and comes in the next line after the first image. 现在，我已经并排布置了两个图像，但是当我更改页面的大小时，图像会自动换行并出现在第一张图像之后的下一行中。
Here is my code sample and the CSS: 这是我的代码示例和CSS：
.header { display: inline-block; margin-left: auto; margin-right: auto; height: 120px; }
<img class="header" src="http://www.placehold.it/160X120" style="float: left;" alt="CCM Logo"> <img class="header" src="http://www.placehold.it/543X120/0000FF" alt="CCM Banner">
6 个解决方案
解决方案1
2 已采纳 2015-06-15 05:50:08
Use white-space: nowrap to prevent wrapping. 使用white-space: nowrap防止包装。
.header { margin: 0 auto; max-width: 800px; /*centering header*/ height: 120px; position: relative; /*scale header images to 120px*/ white-space: nowrap; /*keep one-line*/ overflow: hidden; /*hide excess images parts on small screens*/ } .header>img { height: 100%;}
<body> <div class="header"> <img src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" alt="CCM Logo"> <img src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner"> </div> </body>
解决方案2
1 2015-06-15 05:42:29
.header { display: inline-block; margin-left: auto; margin-right: auto; max-width: 50%; height:120px; } HTML:
<body> <img class="header" src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" style="float: left;" alt="CCM Logo"> <img class="header" src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner"> </body>
解决方案3
0 2015-06-15 05:39:51
Give style 给风格
.header {
display: block;
float:left;
height: 120px;
}
to both images 到两个图像
解决方案4
0 2015-06-15 05:43:51
Apply below style: 适用以下样式：
.header {
display: inline-block;
height: 120px;
width: 50%;
}
解决方案6
-1 2019-02-18 21:16:02
Try this - 尝试这个 -
<div class="imgclass">
<div class="img1">
your img here
</div>
</div>
<div class="imgclass">
<div class="img2">
your img here
</div>
</div>
On your css file or between <style>here</style> this - 在您的CSS文件中或<style>here</style> ，
.imgclass {
display: table-cell;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.