圖像不結垢

我試圖居中的畫面連接到它背後的黑色格與格對齊，但如果你使窗口小（窗口寬度），黑色格將得到小，會出現一些空間圖片左上角和右下角與黑色的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>

來源

2017-02-12 Bogdan2305

我建議是這樣的：

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

來源

2017-02-12 23:01:31 Mike

該死的，你很好。 – Bogdan2305

@ Bogdan2305謝謝:) – Mike

謝謝。保存我的屁股。 – Bogdan2305

我會推薦一個負責任的寬度設置爲左，右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>

來源

2017-02-12 23:06:58

好的，我會記住這一點。謝謝。 – Bogdan2305

非常好的建議。的確我也需要這個。 – Bogdan2305

回答

相關問題