CSS -在内容周围添加边框+向下划分列

Question

我想在每一列内容的分隔栏前后添加一个边框，但如果不缩小容器的大小，则似乎无法做到这一点，这反过来又减少了内部内容的大小，使所有内容看起来都被压扁了。

下面是我所拥有的一张图片：捕获

下面是我想要实现的目标的一个例子：编辑

我添加了图片，以更好地传达我的目标，这是相当不言自明的，我想做什么，有什么办法我可以有效地实现这一点吗？

我不明白怎样才能让边框从列的中间边下来，并与外面的边框连接。

下面是一个代码片段，以进一步帮助任何能够提供帮助的人，感谢所有帮助：

​

body, html{
    margin: 0;
}
#site-wrap{
    padding:25px 10px;
}
li{
    margin: 10px 0;
}
section.li{
    max-width: 145px;
}
.stretch{
    height: 180px;
}
p{
    line-height: 1.5;
}
#sc1{
    display: flex;
    justify-content: space-evenly;
}

<div id="site-wrap">
 <div id="sc1">
    <section class="li">
        <h1 class="red">Do's</h1>
        <p class="stretch"><i class="fal fa-check"></i> Always fully unroll extension cords to keep them from overheating.</p>
        <p class="stretch"><i class="fal fa-check"></i> Always fully unroll extension cords to keep them from overheating.</p>
    </section>
    <section class="li">
        <h1 class="red">Dont's</h1>
        <p class="stretch"><i class="fal fa-times"></i> Never overload powerboards, piggyback or use multiple double adaptors.</p>
        <p class="stretch"><i class="fal fa-times"></i> Do not expose extension cord joins to the weather or join more than one extension cord together.</p>
    </section>
 </div>
</div>

​

Answer 1

• .flex-container有保证金，但没有填充。
• .flex-child有填充，但没有保证金。
• 只有第二个.flex-child有边境线。

​

body,
html {
  margin: 0;
}

.flex-container {
  display: flex;
  margin: 25px 10px;
  border: 3px solid black;
}

.flex-child {
  flex: 1 1 50%;
  padding: 30px;
}

.flex-child:nth-child(2) {
  border-left: 3px solid black;
}

p {
  line-height: 1.5;
  height: 180px;
}

<div class="flex-container">
  <section class="flex-child">
    <h1>Do's</h1>
    <p>Always fully unroll extension cords to keep them from overheating.</p>
    <p>Always fully unroll extension cords to keep them from overheating.</p>
  </section>
  <section class="flex-child">
    <h1>Dont's</h1>
    <p>Never overload powerboards, piggyback or use multiple double adaptors.</p>
    <p>Do not expose extension cord joins to the weather or join more than one extension cord together.</p>
  </section>
</div>

​

Answer 2

编辑： flex-grow: 1将允许flex项的子级扩展和填充父级宽度，在您的情况下，它比最大宽度更好，并在.li类上添加边框。

​

body, html{
    margin: 0;
}
#site-wrap{
    padding:25px 10px;
}
li{
    margin: 10px 0;
}

section.li {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em;  
}

section.li:nth-of-type(1) {
    border: 1px solid black;
}

section.li:nth-of-type(2) {
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}



.stretch{
    height: 180px;
}
p{
    line-height: 1.5;
}
#sc1{
    display: flex;
    justify-content: space-evenly;
}

<div id="site-wrap">
 <div id="sc1">
    <section class="li">
        <h1 class="red">Do's</h1>
        <p class="stretch"><i class="fal fa-check"></i> Always fully unroll extension cords to keep them from overheating.</p>
        <p class="stretch"><i class="fal fa-check"></i> Always fully unroll extension cords to keep them from overheating.</p>
    </section>
    <section class="li">
        <h1 class="red">Dont's</h1>
        <p class="stretch"><i class="fal fa-times"></i> Never overload powerboards, piggyback or use multiple double adaptors.</p>
        <p class="stretch"><i class="fal fa-times"></i> Do not expose extension cord joins to the weather or join more than one extension cord together.</p>
    </section>
 </div>
</div>

​

Answer 3

因此，首先您需要查看边框宽度文档，这里的诀窍是设置

• 边框底部，上，左，右侧在左侧border-width: 1px 1px 1px 1px;
• 右上，右下，右上，右下角，border-width: 1px 1px 1px 0px;
• 然后设置边框样式和颜色(border-color: #000; border-style: solid;)和它。

但是首先，您需要删除justify-content: space-evenly;中的#sc1，因为您的2 li是分开的，我们需要它在一起，阅读更多关于正当性-内容的信息。

我建议使用justify-content: center，但这完全取决于您。

​

body, html{
    margin: 0;
}
#site-wrap{
    padding:25px 10px;
}
li{
    margin: 10px 0;
}

section.li{
    max-width: 145px;
    /* --- new --- */
    border-color: #000;
    border-style: solid;
    /* --- new --- */
}
/* --- new --- */
section.left{
    border-width: 1px 1px 1px 1px;
}
section.right{
    border-width: 1px 1px 1px 0px;
}
/* --- new --- */
.stretch{
    height: 180px;
}
p{
    line-height: 1.5;
}
#sc1{
    display: flex;
    justify-content: center
}

<div id="site-wrap">
 <div id="sc1">
    <section class="li left">
        <h1 class="red">Do's</h1>
        <p class="stretch"><i class="fal fa-check"></i> Always fully unroll extension cords to keep them from overheating.</p>
        <p class="stretch"><i class="fal fa-check"></i> Always fully unroll extension cords to keep them from overheating.</p>
    </section>
    <section class="li right">
        <h1 class="red">Dont's</h1>
        <p class="stretch"><i class="fal fa-times"></i> Never overload powerboards, piggyback or use multiple double adaptors.</p>
        <p class="stretch"><i class="fal fa-times"></i> Do not expose extension cord joins to the weather or join more than one extension cord together.</p>
    </section>
 </div>
</div>

​