使用wordpress Customizr主题的媒体查询

时间：2017-11-06 17:45:33

标签： html css wordpress

我正在使用wordpress主题Customizr，并且在页面上显示div（在.house div下的.about，.images）以显示在块中（垂直一个在另一个上面）时遇到问题。我试过显示：内联块，显示：块，宽度：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>

1 个答案:

答案 0 :(得分：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/

相关问题
最新问题