Html: 调整页面大小时图片换行

Question

我正在 HTML 页面上制作页眉，其中我有一个图像与页面左侧对齐，一个图像与右侧对齐。当我水平放大页面时，我希望中心背景颜色为白色，而当我水平缩小页面时，中心白色部分最小化为无。然后右侧的图像应该随着页面缩小从右侧切掉。

我遇到的主要问题是，当我缩小页面时，右边的图像低于左边的图像。我怎样才能解决这个问题？中间部分也不是白色的。

HTML:

<div class="navlogo">
    <div class="left">
        <img src="Weir-Logo.jpg">
    </div>
    <div class="right">
        <img src="compass.jpg" />
    </div>
</div>

CSS:

.navlogo {
width:100%;
background-color: white;
}

.navlogo .left {
float:left;       
}

.navlogo .right {
float:right;
}

Answer 1

position: relative 用于左图，position: absolute 用于右图以及两者的 z-index 值应该让你到达那里：

.navlogo {
  width: 100%;
  background-color: white;
}

.navlogo .left {
  float: left;
}

.navlogo .left img {
  position: relative;
  z-index: 1;
}

.navlogo .right {
  position: relative;
}

.navlogo .right img {
  position: absolute;
  right: 0;
  z-index: 0;
}

<div class="navlogo">
    <div class="left">
        <img src="http://placehold.it/400x200/f2f2f2/000000">
    </div>
    <div class="right">
        <img src="http://placehold.it/400x200/000000/ffffff" />
    </div>
</div>

Answer 2

我会同意 Turnip 的回答，但如果您喜欢表格，这里还有另一种选择：

<table style="width:100%;background-color:white">
    <tr>
        <td align="left">
            <img src="Weir-Logo.jpg">
        </td>
        <td></td>
        <td align="right">
            <img src="compass.jpg" />
        </td>
    </tr>
</table>

Answer 3

使用 "max-width" 样式，图像将调整大小。

<div class="left">
    <img style="max-width:30%;" src="Weir-Logo.jpg">
</div>
<div class="right">
    <img style="max-width:30%;" src="compass.jpg" />
</div>

Answer 4

如果我没听错的话，您是在找这样的东西吗？ Fiddle: https://jsfiddle.net/7twgsx23/1/

您需要为 navlogo 指定高度值才能获得白色背景。

CSS:

.navlogo{
  width: 100%;
  height: 100px;
  background-color: white;
  overflow: hidden;
  min-width:600px;
}

我还建议使用中间 div 来获得所需的布局。

HTML:

<div class="middle">
   &nbsp; 
</div>

如果你不想那里有任何内容，你可以使用 non-breaking space 填充中间 div。

Answer 5

到目前为止，您已经掌握了 old-school 个策略：表格和 position:absolute。两者都不符合您对 "the image on the right should be cut off from the right as the page shrinks" 的要求，并且由于各种原因都可能出现问题——表格就是表格； absolute-positioning，虽然有时是必要的，但往往会导致布局脆弱；除非绝对必要，否则我尽量避免接触工具箱的那部分。

在这种情况下，我会依赖 CSS 背景图像，并使用 @media 断点来覆盖两种不同的布局。

有了这个HTML:

<div class="navlogo"><div></div></div>

这涵盖了 "the screen is wider than both images; put whitespace in between them" 案例：

.navlogo {
  background: url('//placehold.it/250x100') top left no-repeat;
}
.navlogo div {
  background: url('//placehold.it/250x100') top right no-repeat;
  min-height: 100px;
}

然后，对于"the screen is smaller than the two images, so cut the right-hand one off from the right"：

@media screen and (max-width: 500px) {
  .navlogo div {
    background-position: 250px 0;
  }
}

(这里的@media断点应该是两个图片的宽度相加，right-hand图片的background-position应该是left-hand图片的宽度。调整正文 margins/padding 根据需要。）

Html: 调整页面大小时图片换行

Html: image going to new line when resizing page

html

css

inline