修復瀏覽器上的容器縮放和調整大小

我在下面創建了以下橫幅，使用三角形和矩形爲了在圖像上創建所需橫幅。但是，如果用戶在瀏覽器中放大這兩個容器之間的差距。任何想法如何我可以將兩個容器固定在一起，或者有更好的方法來使用CSS編寫此橫幅廣告？提前致謝！ :)修復瀏覽器上的容器縮放和調整大小

代碼：

<html> 
<style> 
#triangle { 
    width: 0; 
    height: 0; 
    border-bottom: 150px solid red; 
    border-right: 50px solid transparent; 
    top: 8px; 
    position: relative; 
} 

#square { 
    background-color:red; 
    height:150px; 
    width:300px; 
    z-index: 3; 
    margin-left: 8px; 
    top: 8px; 
    position: relative; 
    color: white; 
} 

.align div { 
    display:inline-block; 
    float: left; 
} 


</style> 
<div class="img"> 
    <img src="IMAGE HERE" alt="test" width="800" height="150"> 
</div> 
<div class="align"> 
    <div id="square"> 
    <h1> 
    Headline 
    </h1> 
    <p> 
    Some text here! 
    </p> 
    </div> 
    <div id="triangle"></div> 
</div> 
</html>

來源

2016-08-11 Andrew

你的html在哪裏？ –

對不起，我的錯誤。 HTML添加:) – Andrew

用JSFiddle查看代碼時我看不到任何差距 – Relisora

我沒有看到矩形，並在我的瀏覽器中的三角形之間的任何空白。不過我清理你的代碼，所以你可以試試這個：

#triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 150px solid red; 
 
    border-right: 50px solid transparent; 
 
    top: 8px; 
 
    position: relative; 
 
} 
 

 
#square { 
 
    background-color:red; 
 
    height:150px; 
 
    width:300px; 
 
    z-index: 3; 
 
    margin-left: 8px; 
 
    top: 8px; 
 
    position: relative; 
 
    color: white; 
 
} 
 

 
.align div{ 
 
    display:inline-block; 
 
    float: left; 
 
} 
 

 
.align { 
 
    min-width:450px; 
 
}

<div class="align"> 
 
    <div id="square"> 
 
    <h1> 
 
     Title 
 
    </h1> 
 
    <p> 
 
    Some text here....... 
 
    </p> 
 
    </div> 
 
    <div id="triangle"></div> 
 
</div>

編輯：固定在400％的縮放對齊。添加min-width至.align。

來源

2016-08-11 06:34:44 Relisora

根據您的代碼，我將「絕對」更改爲「相對」，但我仍然遇到同樣的問題。如果你在JSFiddle中運行它，你不會看到這個問題，因爲你需要放大到200％或更高。我在Firefox和Chrome中都遇到了這個問題。任何其他可能的修復或者可能以不同的方式寫入？ – Andrew

我不只是把絕對''改爲'相對'。你能給我們一個鏈接到我們可以嘗試看到問題的地方嗎？ – Relisora

我已將更新後的CSS添加到問題的正文並添加了html標籤，以便您可以在本地運行它。如果在Chrome瀏覽器上放大到400％，則會看到三角形下降到下面的行。我需要找到一種方法讓他們幾乎像一個容器一樣對待。是否可以用一個容器而不是兩個創建這個容器？ – Andrew

此問題依賴於瀏覽器，並非所有瀏覽器都顯示相同的問題。 Chrome可能會顯示完美，但Mozilla可能會出現問題。此外，使用重置CSS來避免任何瀏覽器依賴的CSS屬性。

來源

2016-08-11 07:29:55

修復瀏覽器上的容器縮放和調整大小

回答

相關問題