子div周围的CSS div边框 [英] CSS div border around child divs

问题描述

1. 我有一个容器 div，其中包含 3 个 div.
2. 当我为容器 div 编写 border:1px 纯红色时，边框仅显示在这 3 个子 div 的顶部，而不显示在它们周围.

3. 下面是css代码.

   #cont {宽度:800px；边距右:自动；左边距:自动；边框:1px 红色虚线；填充:2px；}#第三，#第二，#第一{宽度:260px；向左飘浮;边距:2px；}

HTML 代码:

![
<div id="third"><p>演示文本</p></br><p>演示文本</p></br><p>演示文本</p></br><p>演示文本</p></br>
<div id="second"><p>演示文本</p></br><p>演示文本</p></br><p>演示文本</p></br><p>演示文本</p></br>

<div id="third"><p>演示文本</p></br><p>演示文本</p></br><p>演示文本</p></br><p>演示文本</p></br>

</div>][1]

解决方案

add overflow:hidden;

#cont {width:800px;margin-right:auto;margin-left:auto;边框:1px 红色虚线；填充:2px；溢出:隐藏；}

1. I have one container div, which contains 3 divs inside it.
2. When i write border:1px solid red for container div, border is shown only on top of these 3 child divs, but not around them.

3. Below is css code.

   #cont {
       width:800px;
       margin-right:auto;
       margin-left:auto; 
       border:1px dashed red;
       padding:2px;
   }
   #third, #second, #first {
       width:260px;
       float:left;
       margin:2px;
   }
   

Html code:

![<div id="cont">
<div id="third"><p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
</div>

<div id="second"><p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
</div>

<div id="third"><p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
</div>
</div>][1]

解决方案

add overflow:hidden;

#cont {width:800px;margin-right:auto;margin-left:auto; border:1px dashed red;padding:2px; overflow:hidden;}

这篇关于子div周围的CSS div边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！