时间戳

首页 > 解决方案 > 为什么两个css-table之间有差距？但不是当我使用块代替？

css - 为什么两个css-table之间有差距？但不是当我使用块代替？

问题描述

当我给两个 DIV display:table 时，两个元素之间会出现一个小间隙。在另一个线程中，我读到当您放大时可能会发生这种情况，因为有人无法划分两个像素。

但这并不能解释为什么当我给两个DIV display:block 时不会出现这个问题，无论我放大多少，都没有间隙。

所以我的问题是为什么会有差异，我怎样才能避免“表格”之间的差距发生？

感谢您的帮助...

两张桌子

.grid_container {
    display: grid;
    height: 600px;
    width: 50%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.grid_item {
    width: 100%;
    height: 100%;
}

.grid_item_content {
    width: 100%;
    height: 100%;
    transition: transform 3s;
    transform-style: preserve-3d;
}

.item_content_front {
    background-color: #d3dce6;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    display: table;

}

.item_content_back {
    background-color: #cfb0b1;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(.5turn);
    backface-visibility: hidden;
    margin-top: -300px;
    display: table;

}

p {
    display: table-cell;
    width: 100%;
    height:100%;
    vertical-align: middle;
    text-align: center;
}

.grid_item:hover .grid_item_content {
transform: rotateY(.5turn);
}
<!DOCTYPE html>

<html>
    
    <head>
     <meta charset="UTF-8"/>
<link rel="stylesheet" href="style/style1.css"/>
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

        <body>
            <div class="grid_container">
                
                <div class="grid_item" id="grid_item_1">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Brauerei
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Unsere Biere
                            </p>
                        </div> 
                  </div>
                </div>
                
                <div class="grid_item" id="grid_item_2">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Restaurant
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Öffnungszeiten
                            </p>
                        </div> 
                  </div>
                </div>
                                
                <div class="grid_item" id="grid_item_3">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Philosophy
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Beer gut, alles gut...
                            </p>
                        </div> 
                  </div>
                </div>
                
                <div class="grid_item" id="grid_item_4">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Culture
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Sudwerk
                                Stammtisch
                            </p>
                        </div> 
                  </div>
                </div>
                
            </div>

<script src="js/code1.js"></script>
        </body>

</html>

标签： csscss-tables

解决方案

你是对的，这是亚像素的问题。当父级不是全像素宽度（至少在 Chrome 上）时，看起来block和元素的宽度计算略有不同，导致~0.4px 的差异。table

您可以通过将显示设置为block或将子像素添加到宽度来修复它calc(100% + 0.5px)。

.a {
    background: red;
    height: 100px;
    width: 50%;
}

.b {
    background: yellow;
    width: 100%;
    height: 100%;
    display: table;
}

.d {
    display: block;
}

.c {
    width: calc(100% + 0.5px);
}
<div class="a">
    <div class="b">normal</div>
</div>
<div class="a">
    <div class="b c">display: block</div>
</div>
<div class="a">
    <div class="b d">width: calc(100% + 0.5px)</div>
</div>

推荐阅读