Question

首先，如果此处有任何相同类型问题的重复，请向我道歉，但我已经阅读了一些并且它没有解决我的问题。

下面是代码：

<div class="article-wrapper">
    <div class="row">
        <div class="small-12 large-7 columns">
            <article>
                <h2>What we do.</h2>
                <div class="about-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nisl ullamcorper, volutpat felis sed, volutpat tortor. Quisque eu interdum elit, et viverra justo. Pellentesque lacinia tellus sed vehicula convallis. Etiam dapibus leo eget condimentum varius. Proin pretium malesuada leo, vel faucibus urna elementum vitae. Donec sodales quam eu pellentesque tristique. Duis ultricies est at lobortis dictum. Nam ornare neque et justo facilisis, eget convallis velit interdum. Quisque eu eros id lectus sagittis porta. Aenean et mi nec eros vehicula fringilla et non libero. Donec sed auctor lacus. Sed accumsan egestas ante, id sollicitudin ligula. Phasellus tellus neque, rutrum id lacus et, posuere viverra arcu.</p> 
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nisl ullamcorper, volutpat felis sed, volutpat tortor. Quisque eu interdum elit, et viverra justo. Pellentesque lacinia tellus sed vehicula convallis. Etiam dapibus leo eget condimentum varius. Proin pretium malesuada leo, vel faucibus urna elementum vitae. Donec sodales quam eu pellentesque tristique. Duis ultricies est at lobortis dictum. Nam ornare neque et justo facilisis, eget convallis velit interdum. Quisque eu eros id lectus sagittis porta. Aenean et mi nec eros vehicula fringilla et non libero. Donec sed auctor lacus. Sed accumsan egestas ante, id sollicitudin ligula. Phasellus tellus neque, rutrum id lacus et, posuere viverra arcu./p></div>
                <h2>It's all about you.</h2>
                <div class="about-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nisl ullamcorper, volutpat felis sed, volutpat tortor. Quisque eu interdum elit, et viverra justo. Pellentesque lacinia tellus sed vehicula convallis. Etiam dapibus leo eget condimentum varius. Proin pretium malesuada leo, vel faucibus urna elementum vitae. Donec sodales quam eu pellentesque tristique. Duis ultricies est at lobortis dictum. Nam ornare neque et justo facilisis, eget convallis velit interdum. Quisque eu eros id lectus sagittis porta. Aenean et mi nec eros vehicula fringilla et non libero. Donec sed auctor lacus. Sed accumsan egestas ante, id sollicitudin ligula. Phasellus tellus neque, rutrum id lacus et, posuere viverra arcu.</p></div>
                <h2>In brief</h2>
                <div class="about-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nisl ullamcorper, volutpat felis sed, volutpat tortor. Quisque eu interdum elit, et viverra justo. Pellentesque lacinia tellus sed vehicula convallis. Etiam dapibus leo eget condimentum varius. Proin pretium malesuada leo, vel faucibus urna elementum vitae. Donec sodales quam eu pellentesque tristique. Duis ultricies est at lobortis dictum. Nam ornare neque et justo facilisis, eget convallis velit interdum. Quisque eu eros id lectus sagittis porta. Aenean et mi nec eros vehicula fringilla et non libero. Donec sed auctor lacus. Sed accumsan egestas ante, id sollicitudin ligula. Phasellus tellus neque, rutrum id lacus et, posuere viverra arcu.</p>
                </div>
            </article> 
        </div>
    </div>



    <section>
        <div class="row" id="serv-wrapper">
            <div class="small-12 large-5 columns">
                <h2 class="about-serv">Our Services</h2>
                    <ul class="about-list">
                            <li>LINK</li>
                            <li>LINK</li>
                            <li>LINK</li>
                            <li>LINK</li>
                            <li>LINK</li>
                            <li>LINK</li>
                            <li>LINK</li>
                    </ul>
            </div>
        </div>
    </section>

</div>

CSS：

.article-wrapper {
    padding: 1.5em 6.25%;

}
.about-text{
border-top-width: 100%;
border-top: 1px solid #e5e5e5;
}
.about-serv{
    color:#00AED7;
}





ul.aboutlist  {
    list-style: none;
    padding:0;
    margin:0;
}

ul li.aboutlist  { 
    padding-left: 1em; 
    text-indent: -.7em;
    margin-top:1em;
}

ul li:before.aboutlist  {
    content: "º     ";
    color:#00AED7/* or whatever color you prefer */
}

section {
display: block;
background: #E8E8E8;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width: 100% !important;
z-index: 0;
}

/* END ABOUT */

所以我想要实现的是我们的服务部分，其中的所有内容都与其背景＃E8E8E8的容器具有相同的宽度。

这是我想要的图像：

enter image description here

提前致谢。

Answer 1

您的HTML布局很好，但应删除一些CSS属性。因为你使用了更多不必要的CSS属性。

试试这个：

.article-wrapper {
    width:875px;
    margin:0 auto;
}
section {
    background: #E8E8E8;
    width: 100%;
}
.about-list > li {
    list-style: none outside none;
}

此外，如果您想要响应，请尝试这样：添加此标题区域

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

另外添加你的主要风格css：

@media only screen and (min-width: 320px) and (max-width: 480px) {
.article-wrapper {
    width:100%;
    padding:0;
}
#serv-wrapper {
    margin: 0 auto;
    width: 90%;
}

}

Answer 2

您可以将width:100%添加到.about-serv类。

.about-serv{
    color:#00AED7;
    width:100%;
}

容器内的全宽部分

2 个答案: