Question

我创建了一个可以包含多个项目的大型div容器（div＆＃39; s），像那样： container

但是，正如您所看到的，每个项目的底部和右侧都有一个不需要的白色间隙，我不知道它来自何处。如果项目不适合容器（水平）

，则这些项目应该是可滚动的

HTML：

<div class="maincontainer">

        <div class="container">
            <div class="box">
            </div>
            <div class="box2">
            </div>
        </div>

        <div class="container">
            <div class="box">
            </div>
            <div class="box2">
            </div>
        </div>

        <div class="container">
            <div class="box">
            </div>
            <div class="box2">
            </div>
        </div>

</div>

CSS：

.maincontainer {
    width: 90%; 
    min-height: 200px; 
    margin: auto; 
    border: 1px solid black;
    padding: 0;     
    overflow-x: auto; 
    white-space: nowrap; 
}

.container {
    position: relative;
    width: 200px; 
    height: 200px;  
    display: inline-block; 
    background-color: #444444;
    margin: 0;
    padding: 0;
}

.box{
    position: absolute;
    top:0;
    right: 0;   
    left: 0;
    bottom:0;
    margin:auto;
    height:100px;
    width:180px;  
    background-color:#666666;
}

.box2{
    position: absolute;
    top:0;
    right: 0;   
    left: 0;
    bottom:0;
    margin:auto;
    height:80px;
    width:160px;  
    background-color:#fff;
}

我还制作了Plunker

任何帮助表示赞赏！感谢

Answer 1

我找到了解决方案。将maincontainer的字体大小设置为0就可以了！用Google搜索删除css中的空格并找到：

this

Answer 2

默认情况下，您的div是block元素，但是，您将它们更改为inline个元素。 Inline个元素有一个空格。这就是为什么你们两个元素之间存在差距的原因。

您可以将主容器display更改为flex，如下所示：

.maincontainer {
    width: 90%; 
    display:flex;
    min-height: 200px; 
    margin: auto; 
    border: 1px solid black;
    padding: 0;     
    overflow-x: auto; 
    white-space: nowrap; 
}

.container {

    position: relative;
    width: 200px; 
    height: 200px;  
    display: inline-block; 
    background-color: #444444;
    margin: 0;
    padding: 0;
}

.box{
    position: absolute;
    top:0;
    right: 0;   
    left: 0;
    bottom:0;
    margin:auto;
    height:100px;
    width:180px;  
    background-color:#666666;
}

.box2{
    position: absolute;
    top:0;
    right: 0;   
    left: 0;
    bottom:0;
    margin:auto;
    height:80px;
    width:160px;  
    background-color:#fff;
}

那应该是它！：）

div-container中绝对div周围的不需要的边框

2 个答案: