保证金添加使我的div框元素转移

时间：2016-12-20 14:42:49

标签： html css

我是一个新的html＆amp; CSS学习者和我的第一个任务（创建响应式设计页面）令人头疼。请在此网址中查看我的代码：https://jsfiddle.net/prhjfsLs/ 

 <h1>RESPONSIVE DESIGN LAYOUT</h1>

    <div>
        <div class="col-lg-4 col-md-6 col-sl-12" id="Section1"><h7>Section 1</h7><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
        <div class="col-lg-4 col-md-6 col-sl-12" id="Section2"><h7>Section 2</h7><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
        <div class="col-lg-4 col-md-12 col-sl-12"id="Section3"><h7>Section 3</h7><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
    </div>

    * {
    box-sizing: border-box;
}

h1 {
    font-family: georgia;
    text-align: center;
    color: coral;
}


#Section1 {
    /*width: 420px;*/
    border: 1px solid red;
    margin-bottom: 5px;
    margin-right: 2.5px;
    margin-left: 5px;
    padding: 5px;
    background-color: bisque;
    font-family: georgia;
}

#Section2 {
   /* width: 420px;*/
    border: 1px solid red;
    margin-bottom: 5px;
    margin-left: 2.5px;
    margin-right: 2.5px;
    padding: 5px;
    background-color: bisque;
    font-family: georgia;
}

#Section3 {
    /*width: 420px;*/
    margin-bottom: 5px;
    margin-left: 2.5;
    margin-right: 5px;
    border: 1px solid red;
    padding: 5px;
    background-color: bisque;
    font-family: georgia;
}

h7 {
    background-color: chocolate;
    position: relative;
    border: 1px solid red;
    left: 80%;
    padding: inherit;
    margin-top: 10px;
}


.row {
    width: 100%;
}

@media (min-width: 992px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        float: left;
        border: 1px solid blue; 
    }
    .col-lg-1 {
        width: 8.33%;
    }
    .col-lg-2 {
        width: 16.66%;
    }
    .col-lg-3 {
        width: 25%;
    }
    .col-lg-4 {
        width: 33.33%;
    }
    .col-lg-5 {
        width: 41.66%;
    }
    .col-lg-6 {
        width: 50%;
    }
    .col-lg-7 {
        width: 58.33%;
    }
    .col-lg-8 {
        width: 66.66%; 
    }
    .col-lg-9 {
        width: 74.99%;
    }
    .col-lg-10 {
        width: 83.33%;
    }
    .col-lg-11 {
        width: 91.66%;
    }
    .col-lg-12 {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
        border: 1px solid blue;
    }
    .col-md-1 {
        width: 8.33%;
    }
    .col-md-2 {
        width: 16.66%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-4 {
        width: 33.33%;
    }
    .col-md-5 {
        width: 41.66%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-7 {
        width: 58.33%;
    }
    .col-md-8 {
        width: 66.66%; 
    }
    .col-md-9 {
        width: 74.99%;
    }
    .col-md-10 {
        width: 83.33%;
    }
    .col-md-11 {
        width: 91.66%;
    }
    .col-md-12 {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .col-sl-1, .col-sl-2, .col-sl-3, .col-sl-4, .col-sl-5, .col-sl-6, .col-sl-7, .col-sl-8, .col-sl-9, .col-sl-10, .col-sl-11, .col-sl-12 {
        float: left;
        border: 1px solid blue;
    }
    .col-sl-1 {
        width: 8.33%;
    }
    .col-sl-2 {
        width: 16.66%;
    }
    .col-sl-3 {
        width: 25%;
    }
    .col-sl-4 {
        width: 33.33%;
    }
    .col-sl-5 {
        width: 41.66%;
    }
    .col-sl-6 {
        width: 50%;
    }
    .col-sl-7 {
        width: 58.33%;
    }
    .col-sl-8 {
        width: 66.66%; 
    }
    .col-sl-9 {
        width: 74.99%;
    }
    .col-md-10 {
        width: 83.33%;
    }
    .col-sl-11 {
        width: 91.66%;
    }
    .col-sl-12 {
        width: 100%;
    }
}

每当我在div元素框之间添加边距时，它就会让它们移位。这是我第三天在网上寻找解决方案。

指望你的帮助， 谢谢，

2 个答案:

答案 0 :(得分：0)

将它们包裹在容器div中并给它一些填充。在这里，我从您的响应类（.col-xs-4等）中删除了边框，然后它看起来都很好，就像它们之间有边距一样。

参见本例：

* {
    box-sizing: border-box;
}

h1 {
    font-family: georgia;
    text-align: center;
    color: coral;
}

.container{
  padding:10px;
}

#Section1 {
    /*width: 420px;*/
    border: 1px solid red;
    padding: 5px;
    background-color: bisque;
    font-family: georgia;
}

#Section2 {
   /* width: 420px;*/
    border: 1px solid red;
    padding: 5px;
    background-color: bisque;
    font-family: georgia;
}

#Section3 {
    /*width: 420px;*/
    border: 1px solid red;
    padding: 5px;
    background-color: bisque;
    font-family: georgia;
}

h7 {
    background-color: chocolate;
    position: relative;
    border: 1px solid red;
    left: 80%;
    padding: inherit;
    margin-top: 10px;
}


.row {
    width: 100%;
}

@media (min-width: 992px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        float: left;
    }
    .col-lg-1 {
        width: 8.33%;
    }
    .col-lg-2 {
        width: 16.66%;
    }
    .col-lg-3 {
        width: 25%;
    }
    .col-lg-4 {
        width: 33.33%;
    }
    .col-lg-5 {
        width: 41.66%;
    }
    .col-lg-6 {
        width: 50%;
    }
    .col-lg-7 {
        width: 58.33%;
    }
    .col-lg-8 {
        width: 66.66%; 
    }
    .col-lg-9 {
        width: 74.99%;
    }
    .col-lg-10 {
        width: 83.33%;
    }
    .col-lg-11 {
        width: 91.66%;
    }
    .col-lg-12 {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
    }
    .col-md-1 {
        width: 8.33%;
    }
    .col-md-2 {
        width: 16.66%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-4 {
        width: 33.33%;
    }
    .col-md-5 {
        width: 41.66%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-7 {
        width: 58.33%;
    }
    .col-md-8 {
        width: 66.66%; 
    }
    .col-md-9 {
        width: 74.99%;
    }
    .col-md-10 {
        width: 83.33%;
    }
    .col-md-11 {
        width: 91.66%;
    }
    .col-md-12 {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .col-sl-1, .col-sl-2, .col-sl-3, .col-sl-4, .col-sl-5, .col-sl-6, .col-sl-7, .col-sl-8, .col-sl-9, .col-sl-10, .col-sl-11, .col-sl-12 {
        float: left;
    }
    .col-sl-1 {
        width: 8.33%;
    }
    .col-sl-2 {
        width: 16.66%;
    }
    .col-sl-3 {
        width: 25%;
    }
    .col-sl-4 {
        width: 33.33%;
    }
    .col-sl-5 {
        width: 41.66%;
    }
    .col-sl-6 {
        width: 50%;
    }
    .col-sl-7 {
        width: 58.33%;
    }
    .col-sl-8 {
        width: 66.66%; 
    }
    .col-sl-9 {
        width: 74.99%;
    }
    .col-md-10 {
        width: 83.33%;
    }
    .col-sl-11 {
        width: 91.66%;
    }
    .col-sl-12 {
        width: 100%;
    }
}
<h1>RESPONSIVE DESIGN LAYOUT</h1>
    
    <div>
        <div class="col-lg-4 col-md-6 col-sl-12 container">
                <div id="Section1"><h7>Section 1</h7><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div></div>
        <div class="col-lg-4 col-md-6 col-sl-12 container">
        
        <div id="Section2"><h7>Section 2</h7><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div></div>
        <div class="col-lg-4 col-md-12 col-sl-12 container">
        
        <div id="Section3"><h7>Section 3</h7><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        </div>
    </div>

答案 1 :(得分：0)

  

每当我在div元素框之间添加边距时，它就会让它们移位。

此类行为的原因是您将媒体查询设置为

.col-lg-4 {
    width: 33.33%;
}

你有一个div个col-lg-4类标签。使用此规则，它在父节点上占用99.99%宽度（所有3个div一起）。

现在，如果您在任何一个div上添加额外的边距，父级上没有空格来包含您的div 。所以它转移了。

要解决此问题，您可以包装div并提供填充作为已建议的另一个答案。

相关问题
最新问题