修复浏览器上的容器缩放和调整大小

我在下面创建了以下横幅，使用三角形和矩形为了在图像上创建所需横幅。但是，如果用户在浏览器中放大这两个容器之间的差距。任何想法如何我可以将两个容器固定在一起，或者有更好的方法来使用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

修复浏览器上的容器缩放和调整大小

回答

相关问题