Как использовать специфичность с CSS?

Question

У меня есть коробки, которые я хочу выровнять.Я не могу изменить HTML на самом деле, поэтому мой единственный вариант - CSS.Использование:

@media (min-width: 768px){.entry-content a {width: 32%;}} 

работает для выравнивания элементов div, по крайней мере, во всех аспектах, кроме высоты.Однако это влияет на другие поля на другой странице, которые в любом случае находятся в другом формате.

Поэтому я попытался сделать следующее, чтобы уточнить и тем самым дифференцировать.

@media (min-width: 768px){.box-layout >.entry-content a {width: 32%;}}

И:

@media (min-width: 768px){.box-layout.entry-content a {width: 32%;}}

Не сработало.

Похоже, что-либо с .entry-content влияет на другие div, так как я могу указать?В основном я хочу, чтобы все коробки здесь: https://adsler.co.uk/find-an-event/ одинакового размера и высоты с 3 х 3 в сетке.

Я также пытался полностью исключить . entry-content, используя:

@media (min-width: 768px){.event-img {
max-height: 190px;
overflow: hidden;
 }}

Я также пытался:

#content .entry-summary img.wp-post-image, #content 
.entry-content img { 
height: 250px;
}

.box-layout { 
width: 100%
}

Это выравнивало высоту, но пробелы междууже и использует entry-content, так что испортил мои другие коробки на другой странице.

Также попробовал это в моем header.php

<style>
@media (min-width: 768px) {
    .entry-content a {
        width: 32%;
    }
}
</style>

Не достиг того, что я хочу.

Это самое близкое, что я пришел.

<style>
@media (min-width:768px) {.entry-content 
.event_listings{ display:flex; flex-wrap:wrap; }} @media 
(min-width: 768px){.entry-content .event_listings 
.event_listing{ width:20%; padding:0 20px; }} @media 
(min-width: 768px) {.entry-content .event_listings 
.event_listing .box-layout{ width:100%; float:none; 
height:100%; }} @media (min-width: 768px){.entry-content 
.event_listings .event_listing .box-layout{ display:flex; flex- 
direction:column; }} @media (min-width: 768px){.entry. 
content .event_listings .event_listing .box-layout .event. 
title{ flex-grow: 1; }}
</style>

Это работает в моем header.php, но поля 5 x 5 и разные шестерки ...

Вот мой HTML:

<div class="line-layout" style="display: none;">
    <li class="event_listing post-6985 type-event_listing status-expired hentry" style="visibility: visible;" data-latitude="" data- longitude="">
        <div class="event-info-row-listing">
            <a href="https://adsler.co.uk/event/new-cross-and-deptford-free-film-festival/">
                <div class="row">
                    <div class="col-md-1">
                        <div class="organizer-logo">
                            <img alt="Deptford Film Festival" src="https://adsler.co.uk/wp-content/uploads/event-manager-uploads/event_banner/2019/05/2456d41f16399aed538d25b1cd32ad14.jpg">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="event-title">
                            <h4>New Cross and Deptford Free Film Festival</h4>
                            <div class="boxes-view-listing-registered-code">
                        </div>
                        <div class="event-organizer-name">
                            <normal>Deptford Film Festival
                                <normal></normal>
                            </normal>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="date" <date>2019-05- 26</date>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="event-location">
                        <i class="glyphicon glyphicon-map-marker"></I> London 
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="event ticket">#free</div>
                </div>
                <div class="col-md-3"></div>
            </div>
        </a>
    </div>
</li>

<!-- Box Layout -->
<a class="event_listing post-6985 type-event_listing status-expired hentry" href="https://adsler.co.uk/event/new-cross-and-deptford-free-film-festival/">
    <div class="box-layout">
        <div class="event-img"><img alt="Deptford Film Festival" src="https://adsler.co.uk/wp-content/uploads/event-manager-uploads/event_banner/2019/05/2456d41f16399aed538d25b1cd32ad14.jpg">
        </div>
        <div class="boxes-view-box-registered-code"></div>
        <div class="event-title">
            New Cross and Deptford Free Film Festival
        </div>
        <div class="event-start-date">2019- 05-26</div>
        <div class="event-location">
            <i class="glyphicon glyphicon-map-marker"></i> London 
        </div>
        <div class="box-footer">
            <div class="event-ticket">#free</div>
        </div>
    </div>
</a>

Answer 1

Где вы положили свой код CSS?Вставьте весь код файла

В любом случае, если вы не попробовали, откройте тег <style> в своем HTML-файле и вставьте туда CSS.

<style>
    @media (min-width: 768px) {
        .entry-content a {
            width: 32%;
        }
    }
</style>

Это должно повлиять только настраница была вставлена.

Answer 2

На месте тега head:

<style>@media (min-width:768px) {.entry-content .event_listings{ display:flex; flex-wrap:wrap; }} @media (min-width: 768px){.entry-content .event_listings .event_listing{ width:20%; padding:0 20px; }} @media (min-width: 768px) {.entry-content .event_listings .event_listing .box-layout{ width:100%; float:none; height:100%; }} @media (min-width: 768px){.entry-content .event_listings .event_listing .box-layout{ display:flex; flex-direction:column; }} @media (min-width: 768px){.entry-content .event_listings .event_listing .box-layout .event-title{ flex-grow: 1; }}</style>

Answer 3

Если вы хотите достичь этого

В основном я хочу, чтобы все ящики были здесь: https://adsler.co.uk/find-an-event/ того же размера и высоты с 3 x 3 в сетке.

Тогда самым простым вариантом будет поместить их во флексбокс, как это Полное руководство по Flexbox