Question

我有一个内有桌子的div。通过应用表类，该表使用引导程序进行样式化。默认情况下，bootstrap中的表的边距为20px。

我的div将其高度调整为表格的可见内容，但不包括表格的边距。

我想用div-border设置div的样式，让这些div中的多个div具有连续边框。但是由于表格的（看不见的）边缘，总是存在差距。

这是一个简化示例的小提琴：http://jsfiddle.net/bj13hez3/2/

HTML：

<div>
<table class="table">
    <tr>
        <td>some</td>
        <td>table</td>
        <td>content</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
</div>
<div>
<table class="table">
    <tr>
        <td>some</td>
        <td>other</td>
        <td>table</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    </tr>
</table>
</div>

的CSS：

div { border-left: 2px solid #d7d7d7; }

如果我在div的所有边上放置边框，高度接缝可以正确调整到桌子，包括其边距。我可以做类似

的事情

div { border: 2px solid transparent;
      border-left: 2px solid #d7d7d7;}

但是对应于顶部/底部边框的div之间会有一个小的2px间隙。后来我只想在悬停/鼠标悬停上显示边框，这对我来说可能是一个解决方案（2px可能无法捕捉到某些人的眼睛），但它并不是很好。

如何让我的div / border具有完整内容的高度？

Answer 1

要包含孩子的margin，您需要添加overflow: hidden。对此的可能解释如下。

此问题的几种可能的解决方案包括：

div { border: 2px solid transparent;
      overflow: hidden;}

div table {display: block;}

浏览器总是将边距与附近的边距折叠起来。当您提供overflow: hidden时，它会计算其框内模型中的所有内容，并将其限制在内容中。

很抱歉我的快速脏手写......

这也是float的情况。浮动物品不占用任何空间。看看这里：

＆＃13;

div {padding: 5px; border: 1px solid #666;}

＆＃13;

<div>
  <div style="float: left;"></div>
</div>

＆＃13;

但同样的事情，如果父母有一个overflow: hidden，它就不会发生：

＆＃13;

div {padding: 5px; border: 1px solid #666;}

＆＃13;

<div style="overflow: hidden;">
  <div style="float: left;"></div>
</div>

＆＃13;

这里有一篇关于这个概念的大文章：What You Should Know About Collapsing Margins。 overflow是一个强大的属性，它适用于一切。但是当谈到position时，你需要仔细使用它！

position的工作方式与float类似，两者都不采用布局。例如，请参阅以下代码段：

＆＃13;

div {padding: 5px; border: 1px solid #666;}

＆＃13;

<div>
  <div style="position: absolute;"></div>
</div>

＆＃13;

如果你以错误的方式玩它，那么

＆＃13;

div {padding: 5px; border: 1px solid #666;}

＆＃13;

<div style="overflow: hidden; position: relative;">
  <div style="position: absolute;"></div>
</div>

＆＃13;

以上内容被删除。希望很清楚。

div高度调整不包括其内容的余量

1 个答案: