带有 wordpress Customizr 主题的媒体查询

Question

我正在使用 wordpress 主题 Customizr，并且无法将页面上的 div（.about、.images 在 .house div 下）以块的形式显示（垂直一个在另一个之上）。我试过 display: inline-block, display: block, width: 100% 等。我不知道为什么这些都没有达到预期的效果。我应该怎么办？提前致谢。

CSS：

div.house {
    display: flex;
    width: 100%;
    border-bottom: thin solid rgb(25,99,175);
    padding: 0.5%;,
}

a {
    color: rgb(25,99,175);  
}

.about {
    display: inline;
    padding: 1%;
    margin-left: 0.5%;
    width: 45%;
}

.title {
    font-weight: bold;
}

.desc{
    margin: 0.5%;
    padding: 0.5% !important;
}
.price {
    font-style: italic;
    float: right;
}

.images {
    display: inline;
    margin-right: .5%;
}


.gallery{
    margin: 0.5%;
}

figure {
    padding: 0.5% !important;
}

div.price {
    width: 32%;
    margin: 0.25%;
    padding: 0.25%;
    border-radius: 10px;
    margin-top: .75%;
}

div.day {
        border: thick solid rgb(254,205,11);
}
div.night{
    border: thick solid rgb(242,104,35);    
}
div.both {
        border: thick solid rgb(153,202,61);
        margin-right: 1.5%;
}

div.day-div {
    padding-bottom: 2%;
    margin: 2%;
    border: thick solid rgb(25,99,175);
    overflow:auto;
    border-radius: 10px;
}

div.day-div > h3 {
    margin: .5%;
    color: rgb(53,33,100);
    font-size: 1.3em;
}

div.day-div > h2 {
    color: rgb(25,99,175);
    margin-top: 1%;
    font-weight: 900;
}

div#about {
    text-align: center; 
    width: 70%;
    margin: auto;
}

h1.entry-title {
    margin: auto;
    width: 60%;
    text-align: center;
    font-weight: 700;
    color: rgb(25,99,175);
}
form{
        text-align: center;
}
input {
    width: 100%;
}

div.link-button > a {
    text-decoration: none;
    background-color: rgb(54,198,244);
    color: white;
    padding: 5%;
}

div.link-button, div.link-button > a {
    padding-bottom: 5%; 
    border-radius: 10px;
}

HTML：

<div id="mickey" class="house">
<div class="images">

[gallery columns="2" link="file" ids="56,44"]

</div>
<div class="about">

<span class="title"><a href="/bounce-houses/mickey-park-house">Disney's Mickey Park</a></span>
<p class="description">Join Mickey and Friends for jumping jubilee throughout the day! This Mickey Mouse Clubhouse themed area has Mickey, Donald, Minnie, Daisy, Goofy, and Pluto on the front wall. Make your party magical, reserve today!</p>
<span class="price">STARTING AT $169 PER DAY*</span>

</div>
</div>
<div style="clear: both;"></div>
<div id="spongebob" class="house">
<div class="about">

<span class="title"><a href="/bounce-houses/spongebob-squarepants">Spongebob Squarepants House</a></span>
<p class="description">Join Spongebob, Squidward and Patrick on a crazy jellyfishing adventure. This blue and green house will bring lots of jellyfishing joy with bounce-tastic memories to share. Brighten your party with lots of giggling fun today!</p>
<span class="price left">STARTING AT $159 PER DAY*</span>

</div>
<div class="images">

[gallery columns="2" link="file" ids="49,48"]

</div>
</div>
<div style="clear: both;"></div>
<div id="princess" class="house">
<div class="images">

[gallery columns="2" link="file" ids="57,45"]

</div>
<div class="about">

<span class="title"><a href="/bounce-houses/disney-princess-castle">Disney Princess Castle</a></span>
<p class="description">Invite Snow White, Jasmine, Cinderella, Belle, and Aurora to bounce with your little Princesses. This brilliant castle will complete your royal reception with hours of dazzling delight. Make your princess themed party unforgettable, reserve today!</p>
<span class="price">STARTING AT $159 PER DAY*</span>

</div>
</div>
<div style="clear: both;"></div>
<div id="castle" class="house">
<div class="about">

<span class="title"><a href="/bounce-houses/castle">Storm Castle</a></span>
<p class="description">Storm the castle with this fun bounce house. This house makes a great addition to any party no matter the theme. Top off your get together with exceptional fun today!</p>
<span class="price">STARTING AT $120 PER DAY*</span>

</div>
<div class="images">

[gallery columns="2" link="file" ids="58,47"]

</div>
</div>
<div style="clear: both;"></div>
<div id="double" class="house">
<div class="images">

[gallery columns="2" link="file" ids="59,52"]

</div>
<div class="about">

<span class="title"><a href="/bounce-houses/double-slide">Double Slide</a></span>
<p class="description">Double slide, double the fun! Slide into a fantastic event with this wonderful double-slide bounce house. The jumping fun starts before the slide where you climb up to the double slide for twice the fun! Add the slides to your party today!</p>
<span class="price">STARTING AT $195 PER DAY*</span>

</div>
</div>
<div style="clear: both;"></div>
<div id="pirate" class="house">
<div class="about">

<span class="title"><a href="/bounce-houses/pirate-captain">Pirate Captain</a></span>
<p class="description">Be the captain of the pirates. Slide down to the treasure filled with great memories. This pirate themed combo displays a fun pirate with flags atop a large bounce area with a slide beneath a canon. Discover a treasure of fun! Reserve today!</p>
<span class="price">STARTING AT $239 PER DAY*</span>

</div>
<div class="images">

[gallery columns="2" link="file" ids="122,126"]

</div>
</div>
<div style="clear: both;"></div>
<div id="sports" class="house">
<div class="images">

[gallery columns="2" link="file" ids="42,41"]

</div>
<div class="about">

<span class="title"><a href="/bounce-houses/sports-slide">Sports Slide</a></span>
<p class="description">Bring the play to the party with this sports themed combo. There are four different types of sports balls atop the pillars of this house; a basketball, a soccer ball, a football, and a baseball. Score top prize by reserving today!</p>
<span class="price">STARTING AT $249 PER DAY*</span>

</div>
</div>
<div style="clear: both;"></div>
<div id="water" class="house">
<div class="about"><span class="title"><a href="/bounce-houses/combo-house">Combo House</a></span>
<p class="description">This large house includes a large slide that can be wet or dry! The large bounce area has a basketball hoop inside for even more jumping fun! Bring the extreme fun to the party today!</p>
<span class="price">STARTING AT $265 PER DAY*</span>

</div>
<div class="images">

[gallery columns="2" link="file" ids="53,54"]

</div>
</div>
<div style="clear: both;"></div>
<div id="party" class="house">
<div class="images">

[gallery columns="2" link="file" ids="39,40"]

</div>
<div class="about">

<span class="title"><a href="/bounce-houses/party-slide">Party Slide</a></span>
<p class="description">This large slide and bounce house combo creates the perfect atmosphere for fun and laughs. This castle features balloons printed on the side and a double arch to make your trip down the slide even more fun. Reserve it today!</p>
<span class="price">STARTING AT $198*</span>

</div>
</div>
<sub>*Prices based on weekend pricing.</sub>

Answer 1

您在 div.house 元素上使用display: flex 属性，默认行为是从左到右显示方向。

如果您希望子元素相互堆叠，请将flex-direction: column; 添加到 div.house 类。您还可以删除 display: flex 属性并从子元素中删除 display: inline。

您可以在此处了解有关 flexbox 的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/