Question

我有2个div，宽度为50％，内联块，在这个div上有一个图像。我预计2个div将保留在一行中，但有时候，浏览器会破坏布局。

这是html：

<div class="views-field views-field-title">
    <span class="field-content">
    <div class="field_home_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep"><h2>Arsenal</h2><img src="/sites/default/files/styles/logo_150x150/public/2016-12/team_logo-2000x2000.png?itok=L_wkCsC6" width="150" height="150" alt="Arsenal logo" typeof="Image" class="image-style-logo-150x150"></a></div><div class="versus-wraper">v</div><div class="field_away_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep"><h2>West Brom</h2><img src="/sites/default/files/styles/logo_150x150/public/2016-12/West_Bromwich_Albion.png?itok=vZlNXq8J" width="150" height="150" alt="West Bromwich Albion logo" typeof="Image" class="image-style-logo-150x150"></a></div>
    </span>
</div>

这是css：

div.view-id-current_match_of_the_day div.views-field-title {
    position: relative;
    margin-bottom: 5px;
}

.view-id-current_match_of_the_day div.field_home_team-wraper, .view-id-current_match_of_the_day div.field_away_team-wraper {
    width: 50%;
    padding-bottom: 1.5em;
}

.view-id-current_match_of_the_day div.field_home_team-wraper, .view-id-current_match_of_the_day div.field_away_team-wraper {
    display: inline-block;
    position: relative;
}

.view-id-current_match_of_the_day div.field_home_team-wraper img, .view-id-current_match_of_the_day div.field_away_team-wraper img {
    width: 40%;
}

.view-id-current_match_of_the_day div.versus-wraper {
    width: 10%;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
}

正如我所说，我预计2 div将保持在一行，就像这样：

但它没有正确呈现。

第一次加载时，布局分为2行：

Chrome上的Chrome（调整窗口宽度小于1024px，移动响应）和IOS / Android上的Chromme 出现此问题，IOS上的Safari也存在此问题。< / p>

Firefox，Edge on PC 没有问题。

点击主页按钮或点击内容然后返回主页，布局变得非常好。

所以我意识到，在第一次加载（或刷新加载）时，当浏览器向服务器请求图像，服务器未完成响应时，浏览器已经完成渲染页面，当图像加载完成时，浏览器会打破布局。

当第二次加载（再次点击主页）时，浏览器从本地缓存中获取图像，布局渲染刚好，正确！

我在这里录制视频：

在PC上使用Chrome（30秒后，按Ctrl + F5忽略缓存重新加载）：https://streamable.com/8xpdx
IOS上的Chrome：https://streamable.com/3bu5y

如果我将 float：left 添加到div.field_home_team-wraper和div.field_away_team-wraper，我可以解决此问题，但我需要避免在我的CSS中浮动。

另一个修复是删除div.versus-wraper，但是我需要这个div而且这个div有绝对位置，所以它不在行中。

我知道2个内联块元素之间有空格，所以我在html中删除了空格：How to remove the space between inline-block elements?

我不知道这里有什么问题，请帮忙。

Answer 1

我的上帝，我解决了这个问题，只需将div.versus-wraper移到span.field-content的最后，一切都变好了。

但仍然不知道为什么会出现问题，对我来说仍然是一个神秘的问题。有些东西需要学习，如果有人知道，请回答。

Answer 2

最好尝试使用响应式css框架，例如Bootstrap

Bootstrap框架响应速度非常快，适用于大多数现代Web浏览器。

使用Bootstrap，您可以更专注于您的业务部分。

浏览器图像渲染中断css内联块布局

2 个答案: