如何分隔每个分区？

-1

我想分开（空格）每个div。 如果我给一些保证金，一个div移动到下一行。如何在同一行中保留3个空格的空格？我需要用CSS编写什么？如何分隔每个分区？

我有基本的HTML结构法：

<div class="col-lg-4 col-md-6"> <section class="a"> A Title </section> <p>Lorem ipsum dolor sit amet,</p></div> 
<div class="col-lg-4 col-md-6"> <section class="b"> B Title </section> <p>Lorem ipsum dolor sit amet,</p></div> 
<div class="col-lg-4 col-md-12"> <section class="C"> C </section> <p>Lorem ipsum dolor sit amet,</p></div>

LG-4：33.33％
MD-6：50％

来源

2017-10-17 newbie35

分享您的代码也 –

也许你应该切换到比这个网格更灵活一些，并尝试flexboxes？ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – sjahan

尝试应用填充。 – Sagar

佛幸运的是，您不必为此编写额外的CSS。最简单的方法就是引导，这个pen演示它。

引导类后，只需你有内部col-lg-4和使用填充或保证金直接孩子一个容器，它会永远是col-lg-4

<div class="row"> 
    <div class="col-lg-4 col-md-4"> 
    <div class="section"> 
     <section class="a"> A Title </section> <p>Lorem ipsum dolor sit amet,</p> 
    </div> 
    </div> 
    <div class="col-lg-4 col-md-4"> 
    <div class="section"> 
     <section class="b"> B Title </section> <p>Lorem ipsum dolor sit amet,</p> 
    </div> 
    </div> 
    <div class="col-lg-4 col-md-4"> 
    <div class="section"> 
     <section class="C"> C </section> <p>Lorem ipsum dolor sit amet,</p> 
    </div> 
    </div> 
</div>

来源

2017-10-17 07:54:53

您必须将 “关口” 中添加预留空间可高达12在一个“行”，所以如果你用“COL-LG-4”是没有足够的空间余量，你需要设置“保证金”到的div容器，并添加更多的div内部，就像这样：

<div class="col-lg-4" style="padding-left: 5px"> 
    <div calss="box col-lg-12"> 
     <!-- Data with padding --> 
    </div> 
</div>

来源

2017-10-17 07:53:41 Alex

我不应该使用inline-block的内部。我需要这种形状：

这是我的HMTL代码：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Example - 1</title> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <h1> Our Menu </h1> 

<div class="col-lg-4 col-md-6"> <section class="a"> A title</section> <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. </p></div> 
<div class="col-lg-4 col-md-6"> <section class="b"> B Title </section> <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.</p></div> 
<div class="col-lg-4 col-md-12"> <section class="c"> C Title </section> <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. </p></div> 

</body> 
</html>

这里是我的CSS文件：

*{ 
    font-family: Comic Sans MS, cursive, sans-serif; 
    box-sizing: border-box; 

} 

h1 { 
    text-align: center; 
} 

div{ 

    background-color: gray; 
    float: left; 

} 
p{ 

    padding: 5px; 
    float: left;  

} 

section{ 
    width: 110px; 
    border: solid 1px black; 
    text-align: center; 
    font-weight: bold; 
    float: right; 

} 

.a{ 
    background-color:#D59898; 
} 

.b{ 
    background-color:#C14543; 
    color: white; 
} 

.c{ 
    background-color:#E5D198; 
} 

@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: 2px solid black; 
    } 
    .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%; 
    } 
} 
/********** Tablet devices only **********/ 
@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: 2px solid black; 
    } 
    .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%; 
    } 
}

来源

2017-10-17 07:57:14 newbie35

如何分隔每个分区？

回答

相关问题