【问题标题】:space between divs - display table-celldiv 之间的空间 - 显示表格单元格
【发布时间】:2013-08-20 22:39:27
【问题描述】:

我这里有两个 div:

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

有没有办法在这两个 div(有display:table-cell)之间腾出空间?

【问题讨论】:

    标签: html css css-tables


    【解决方案1】:

    你可以使用border-spacing属性:

    HTML:

    <div class="table">
        <div class="row">
            <div class="cell">Cell 1</div>
            <div class="cell">Cell 2</div>
        </div>
    </div>
    

    CSS:

    .table {
      display: table;
      border-collapse: separate;
      border-spacing: 10px;
    }
    
    .row { display:table-row; }
    
    .cell {
      display:table-cell;
      padding:5px;
      background-color: gold;
    }
    

    JSBin Demo

    还有其他选择吗?

    ,不是真的。

    为什么?

    • margin 属性 is not applicabledisplay: table-cell 元素。
    • padding 属性不会在单元格边缘之间创建空间。
    • float 属性破坏了 table-cell 元素的预期行为,这些元素能够与其父元素一样高。

    【讨论】:

    • 还有其他选择吗?当然,position: relative.
    • @Jongosi 根据specposition: relativetable-*-grouptable-rowtable-columntable-celltable-caption 元素的影响未定义。
    • 您也可以创建一个与背景颜色相同的单边边框。 border-right: 10px solid #FFF。当我想在 table-cell 元素之间留一些空间时,这对我来说很有效。
    • 您也可以添加单元格纯粹是为了间距。不理想,但至少您避免了尝试关闭最右侧单元格上的边框间距的头痛。
    • 我还希望“填充”仅位于“单元”的 1 个边缘,所以我不得不使用 armadadrive 的解决方案,除了我使用了 rgba(0,0,0, 0)对于透明边框,所以我不必担心背景颜色/图像。右边框:10px 实心 rgba(0,0,0,0);
    【解决方案2】:

    尽可能使用透明边框。

    JSFiddle 演示

    https://jsfiddle.net/74q3na62/

    HTML

    <div class="table">
        <div class="row">
            <div class="cell">Cell 1</div>
            <div class="cell">Cell 2</div>
            <div class="cell">Cell 3</div>
        </div>
    </div>
    

    CSS

    .table {
      display: table;
      border: 1px solid black;
    }
    
    .row { display:table-row; }
    
    .cell {
      display: table-cell;
      background-clip: padding-box;
      background-color: gold;
      border-right: 10px solid transparent;
    }
    
    .cell:last-child {
      border-right: 0 none;
    }
    

    说明

    您可以使用border-spacing 属性,正如公认的答案所暗示的那样,但这不仅会在表格单元格之间产生空间,还会在表格单元格和表格容器之间产生空间。这可能是不需要的。

    如果您的表格单元格不需要可见边框,则应使用transparent 边框来生成单元格边距。透明边框需要设置background-clip: padding-box;,否则表格单元格的背景颜色会显示在边框上。

    IE9 以上(以及所有其他现代浏览器)支持透明边框和背景剪辑。如果您需要 IE8 兼容性或不需要实际的透明空间,您可以简单地设置白色边框颜色并将background-clip 保留。

    【讨论】:

    • 'border-right'设置其实已经足够提供中间的空间了,不需要“table”声明。
    【解决方案3】:
    <div style="display:table;width:100%"  >
    <div style="display:table-cell;width:49%" id="div1">
    content
    </div>
    
    <!-- space between divs - display table-cell -->
    <div style="display:table-cell;width:1%" id="separated"></div>
    <!-- //space between divs - display table-cell -->
    
    <div style="display:table-cell;width:50%" id="div2">
    content
    </div>
    </div>
    

    【讨论】:

      【解决方案4】:

      好吧,上面的方法确实有效,这是我的解决方案,它需要的标记更少,而且更灵活。

      .cells {
        display: inline-block;
        float: left;
        padding: 1px;
      }
      .cells>.content {
        background: #EEE;
        display: table-cell;
        float: left;
        padding: 3px;
        vertical-align: middle;
      }
      <div id="div1" class="cells"><div class="content">My Cell 1</div></div>
      <div id="div2" class="cells"><div class="content">My Cell 2</div></div>

      【讨论】:

        【解决方案5】:

        用任何名称创建一个新的 div(我将只使用 table-split)并给它一个宽度,而不向它添加内容,同时将它放在需要分隔的必要 div 之间。

        您可以添加任何您认为需要的宽度。我只使用了 0.6%,因为这是我必须这样做时所需要的。

        .table-split {
          display: table-cell;
          width: 0.6%
        }
        &lt;div class="table-split"&gt;&lt;/div&gt;

        【讨论】:

        • 这是一个糟糕的解决方案。
        • 当实际表格元素用于布局目的时,这是一种常见的策略,也是该方法现已过时的部分原因。
        • 由于只能用css完成,所以应该避免使用html
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多