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 x 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且有不同的6 ...

这是我的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代码放在哪里？粘贴整个文件代码

无论如何，如果没有尝试，请在HTML文件中打开一个<style>标签，然后将CSS粘贴到此处。

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

那应该只影响它粘贴的页面。

Answer 2

如果您想实现这一目标

基本上，我希望这里的所有框：https://adsler.co.uk/find-an-event/的大小和高度相同，网格中为3 x 3。

那么，最简单的选择就是将它们放在类似A Complete Guide to Flexbox

的flexbox中

Answer 3

在标头位置：

如何在CSS中使用特异性？

3 个答案: