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值都可以让您：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

使用＆＃34; max-width＆＃34;风格图像将调整大小。

<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

如果我理解正确，你是否正在寻找这样的东西？小提琴：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>

如果您不想要任何内容，可以使用不间断空格填充中间div。

Answer 5

到目前为止，你已经涵盖了老派策略：表格和位置：绝对。既不符合你的要求“当页面缩小时，右边的图像应该从右边切断”，并且由于各种原因两者都可能有问题 - 表格，表格，表格;绝对定位，有时是必要的，往往会导致脆弱的布局;除非绝对必要，否则我会尽量避免使用工具箱的那一部分。

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

使用此HTML：

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

这涵盖了“屏幕宽于两个图像;在它们之间放置空格”的情况：

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

然后，对于“屏幕比两个图像小，所以从右边切掉右边的一个”：

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

（这里的@media断点应该是两个图像加在一起的宽度。右手图像的背景位置应该是左手图像的宽度。根据需要调整身体边距/填充。）

Html：调整页面大小时图像转到新行

5 个答案: