Question

我正在尝试将居中的图片附加到它后面的黑色div，但是如果你让窗口变小（窗口宽度更小），黑色div会变小并且会在左上角和右上角之间出现一些空间边缘和黑色div。它不会固定在div附近。

我该如何解决这个问题？谢谢。请在整页中查看，然后在小页面中查看。见这里的例子：

.f-content {
    margin-top: 5%;
    text-align: center;
    display: inline-block;
    width: 100%;
    background-color: #1C2431;
}

<div class="f-content">
<div style="float: left; color:white;">FOOTER LEFT</div>
<img src="http://curier.cumparamlaptopuri.ro/1.png" alt="" width="40%" height="auto" style="margin-top: -26px; position: inherit;" />
<div style="float: right;color:white;">FOOTER RIGHT</div>
<div style="clear: right;"></div>
</div>

Answer 1

我可以建议这样的事情：

.f-content {
    margin-top: 5%;
    text-align: center;
    display: inline-block;
    width: 100%;
    background-color: #1C2431;
    position: relative;
}

img {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  margin-top: -1.9%;
}

<div class="f-content">
<div style="float: left; color:white;">FOOTER LEFT</div>
<img src="http://curier.cumparamlaptopuri.ro/1.png" alt="" width="40%" height="auto">
<div style="float: right;color:white;">FOOTER RIGHT</div>
<div style="clear: right;"></div>
</div>

Answer 2

我建议为左右div设置一个响应宽度。这样黑色条的高度不会扩大。我添加了20％，但如果需要你可以改变它。

<div class="f-content">
<div style="float: left; color:white; width:20%;">FOOTER LEFT</div>
<img src="http://curier.cumparamlaptopuri.ro/1.png" alt="" width="40%" height="auto" style="margin-top: -26px; position: inherit;" />
<div style="float: right;color:white; width: 20%;">FOOTER RIGHT</div>
<div style="clear: right;"></div>
</div>

图像在缩放

2 个答案: