Question

我希望将HTML页面中的两张图片并排排列。

即使页面大小发生变化，我希望图像并排放置。
我还希望第二个图像跨越页面的整个标题，即。第一张图片后留下的所有空间。这里的图片大小不同。

目前，我已经并排排列了两张图片，但是当我更改页面大小时，图片会在第一张图片之后换行并进入下一行。

这是我的代码示例和CSS：

＆＃13;

.header {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  height: 120px;
}

＆＃13;

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

＆＃13;

这是Fiddle。

Answer 1

使用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>

Answer 2

＆＃13;

.header {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
  height:120px;
}


HTML:

＆＃13;

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

＆＃13;

Answer 3

给予风格

.header {
  display: block;
  float:left;
  height: 120px;
}

两个图像

Answer 4

以下风格应用：

.header {
  display: inline-block;
  height: 120px;
  width: 50%;
}

Answer 5

尝试使用max-width Demo

.header {
    max-width:50%;
}

Answer 6

尝试一下-

<div class="imgclass">
    <div class="img1">
        your img here
    </div>
</div>
<div class="imgclass">
    <div class="img2">
        your img here
    </div>
</div>

在您的css文件上或<style>here</style>之间-

.imgclass {
    display: table-cell;
}

并排对齐两张图像

6 个答案: