Браузерное изображение визуализации разбить css встроенный блок макет

У меня есть 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 на ПК (изменение размера окна менее 1024 пикселей для мобильных пользователей) и Chromme на IOS/Android имеют эту проблему, у Safari в IOS также есть эта проблема.

Firefox, Edge на ПК не проблема.

2. Когда вы нажимаете кнопку "Домашняя страница" или нажимаете что-то, а затем возвращайтесь на главную страницу, макет становится очень хорошим.

Поэтому я понимаю, что при первой загрузке (или обновлении нагрузки), когда браузер запрашивает изображение на сервере, сервер не завершен, браузер уже завершен, показывая страницу, когда обработка изображения заканчивается, браузер делает сломанный макет.

При второй загрузке (снова нажмите на домашней странице) браузер получит изображение из локального кеша, рендеринг макета просто хорош, правильно!

Я записываю видео здесь:

• Chrome на ПК (через 30 секунд я нажимаю Ctrl + F5 для перезагрузки кэша): https://streamable.com/8xpdx
• Chrome на IOS: https://streamable.com/3bu5y

Я могу исправить это, если я добавлю float: left to div.field_home_team-wraper и div.field_away_team-wraper, но мне нужно избежать float в моем css.

Еще одно исправление - удалить div.versus-wraper, но мне нужен этот div, и этот div имеет абсолютное положение, поэтому он не находится в строке.

Я знаю, что существует пробел между двумя встроенными блочными элементами, поэтому я удалил пространство в моем html: Как удалить пространство между встроенным блоком элементы?

Я не знаю, что здесь не так, пожалуйста, помогите.

Ответы

Ответ 1

Боже, я решил эту проблему, просто переместил div.versus-wraper в последний из span.field-контента, все стало хорошо.

Но до сих пор не знаю, почему это создает проблему, все еще загадочную для меня. Есть чему поучиться, если кто-то знает, ответьте.

Ответ 2

Лучше попробуйте использовать гибкую фреймворк css, например Bootstrap

Структура Bootstrap очень отзывчива и хорошо работает с большинством современных веб-браузеров.

С помощью Bootstrap вы можете больше сосредоточиться на своей бизнес-части.