Question

我之前已经意识到这个问题，但我读过的解决方案都没有给我一个解决方法。

基本上我在div中有4个响应框，当我向下移动屏幕尺寸时，css的第一个孩子和第n个孩子的选择器不会工作，虽然我已经使用完全相同的代码用于此组下面的另一组框和这完美有效吗？

正如您将看到底部的2个框正常，但前两个框被卡在一起，即使边缘的css已设置为阻止这一点。这可能是一个简单的解决办法，但是在我昨晚彻夜解雇之后我觉得放弃了。

真的很感激任何帮助，谢谢！

HERE是一个小提琴，可以准确显示正在发生的事情：http://jsfiddle.net/f284xyjh/

以下是HTML代码：

<section id="content"> 

    <div class="container">

        <div id="about">
            <h1><a name="about">WE'RE GOOD... JUST ASK OUR CLIENTS!</a></h1>
            <div id="about-text">
            <p>Above The Fold is a Dublin based creative, digital marketing agency that provides a personal, professional and passionate service tailored specifically to each of our clients no matter the size. We specialise in creative digital solutions centred around the user and aim to provide a rich user experience for people interacting with your brand online. Blending creativity with technical know-how and research we can brand, plan, design and build your websites and online campaigns<p>

            </div><!-- end of about-text -->
        </div><!-- End of about -->

        <div id="services">
        <a name="services"></a>
            <div class="service">
                <div class="service-info">
                    <img src="images/creative-design.png" alt="Creative Design icon" />
                    <h3>Creative Design</h3>
                    <p>Creativity is at the heart of what we do. Combining creative thinking with technology to deliver beautiful websites that stand out and engage your target audience.</p>
                </div>
                <a href="#"><div class="find-out-more">FIND OUT MORE</div></a>
            </div>
            <div class="service">
                <div class="service-info">
                    <img src="images/branding-icon.png" alt="Branding icon" />
                    <h3>Branding</h3>
                    <p>Much more then simply the design of a website. Through strategic planning and research we create dynamic brand icons (logos) that define who you are.</p>
                </div>
                <a href="#"><div class="find-out-more">FIND OUT MORE</div></a>
            </div>
            <div class="service">
                <div class="service-info">
                    <img src="images/strategy.png" alt="Social Media Marketing icon" />
                    <h3>Social Media Strategy</h3>
                    <p>Social media marketing gives you an opportunity to expose your brand to a wider audience. All our campaigns are strategically  planned to maximise your reach. </p>
                </div>
                <a href="#"><div class="find-out-more">FIND OUT MORE</div></a>
            </div>
            <div class="service">
                <div class="service-info">
                    <a href="#"><img src="images/digital-marketing.png" alt="Digital Marketing icon" />
                    <h3>Digital Marketing</h3></a>
                    <p>Your business is unique so you need an online strategy that is designed for you. We deliver research driven results that create awarenss of your brand or services</p>
                </div>
                <a href="#"><div class="find-out-more">FIND OUT MORE</div></a>
            </div>

        </div><!-- end of services -->



    </div><!-- End of content container -->

</section><!-- end of top-content section -->

这里是CSS代码：

.container {
width: 1160px;
margin: 0 auto;
overflow: hidden;
}

#content {
height: 605px;
background: #F3F3F2;
margin-top: 1px;
padding-top: 25px;
}

#about {
width: 100%;
display: inline-block;
text-align: center;
}

#about p {
font-family: "Proxima Light",Arial,helvetica,garuda,sans-serif;
font-size: 24px;
line-height: 28px;
margin-bottom: 10px;
}

#about-img {
background: url(../img/about-img.png) no-repeat;
width: 370px;
height: 154px;
float: left;
margin-right: 20px
}

#about-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
line-height: 23px;
}

#services {
width: 100%;
display: inline-block;
}

#services h3 {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #FFF;
}

#services p {
font-size: 16px;
line-height: 20px;
color: #FFF;
}

#services a {
text-decoration: none;
}

.service {
background: #3498db; url(../images/service-find-out-triangle.png) no-repeat center   256px;
width: 275px;
height: 295px;
float: left;
margin: 20px 20px 20px 0;
text-align: center;
position: relative;

}

.service:last-child {
margin-right: 0;
}

.service-info {
background: #3498db;
width: 255px;
height: 245px;
padding: 20px 10px 0;
}

.service img {
margin-bottom: 10px;
}

@media only screen and (max-width : 1224px) {

.container {
width: 1000px;
margin: 0 auto;
overflow: hidden;
}

#content { height: auto;}

.service { width: 490px; margin: 20px 20px 20px 0;}
.service:first-child { margin-right: 0!important;}
.service:nth-child(2) { margin-right: 0!important;}
.service-info { width: 465px; }

}

@media only screen and (max-width : 1024px) {

.container { width: 800px;}

.service { width: 390px;}
.service-info { width: 370px; }

}

@media only screen and (max-width : 824px) {

.container { width: 680px;}

.service { width: 330px;}
.service-info { width: 310px;}

}

@media only screen and (max-width : 768px) {

.container { width: 95%;}

.service { width: 100%; margin: 20px 0;}
.service-info { width: 94%; }

}


}

Answer 1

此选择器：.service:nth-child(2) { margin-right: 0!important;}不起作用，因为您尝试选择的元素不是第二个孩子。

另外......顺便说一下，这个也不是：.service:first-child { margin-right: 0!important;}。

first-child是锚标记

<a name="services"></a>

因此，您应该使用

.service:nth-child(3) { margin-right: 0!important;}

而是... 在此特定情况下。

JSfiddle Demo

CSS first-child和nth-child无法正常工作

1 个答案: