Question

请参阅以下代码和屏幕截图。任何人都可以解释为什么div之间存在白色空白以及如何删除它们？我希望这些div彼此相邻而没有任何边缘

    ![<!DOCTYPE html>
<html>

<head>
<style>

body
{
    color:#b3b3b3;
    font-family:arial;
    font-size:14pt;
}

#containerdiv {
    width: 1184px;
    height: 626px;
    position:absolute;
    margin-top:-338px;
    margin-left:-552px;
    top:50%;
    left:50%;
}

#centerdiv {
    display: inline-block; 
    width: 1024px;
    height: 576px;
    background-color: #fff;
}

#lowercenterdiv {
    background-color: #ff00ff;
    width: 1024px;
    height: 50px;
    text-align:center;
    line-height: 50px;
    display: inline-block; 
} 

#lowerleftdiv {
    background-color: #00ff00;
    width: 80px;
    height: 50px;
    line-height: 50px;
    position:absolute;
} 

#leftdiv {
    position:absolute;
    background-color: #ff000f;
    width: 80px;
    height: 576px;
    display: inline-block; 
    line-height: 576px;
} 

#rightdiv {
    position:absolute;
    background-color: #000fff;
    width: 80px;
    height: 576px;
    display: inline-block; 
    line-height: 576px;
    text-align:right;
} 

#lowerrightdiv {
    position:absolute;
    background-color: #fff000;
    width: 80px;
    height: 50px;
    text-align:right;
    display: inline-block; 
    line-height: 50px;
} 

.arrowimg img
{
    vertical-align: middle;
}

</style>
</head>

<body>
    <div id="containerdiv">
        <div id="leftdiv"><img class="arrowimg" src="leftarrow.png"></div>
            <div id="centerdiv">

            </div>
        <div id="rightdiv"><img class="arrowimg" src="rightarrow.png"></div>
        <div id="lowerleftdiv">?</div>
        <div id="lowercenterdiv">?</div>
        <div id="lowerrightdiv">?</div>
    </div>
</body>
</html>

enter image description here

Answer 1

您可以尝试删除所有position: absolute，因为它们使事情变得复杂。你想要的是：三个盒子彼此相邻，然后在它下面相邻的三个盒子。如果将它们浮动到左侧，则可以解决此问题。我修改了你的CSS，只是复制和粘贴，你可以看到间隙消失，因为浮动元素不关心空格。浮动还有其他困难，但它确实解决了你的问题。

我还删除了我不需要的所有内容。

#containerdiv {
    width: 1184px;
    height: 626px;
    position: absolute;
    margin-top:-338px;
    margin-left:-552px;
    top:50%;
    left:50%;
}

// I added this to float all the divs inside your container to float
#containerdiv div {
    float: left;
}

#centerdiv {
    // I removed position: absolute from every box, as well as line-heights, align and display
    width: 1024px;
    height: 576px;
    background-color: #fff;
}

#lowercenterdiv {
    background-color: #ff00ff;
    width: 1024px;
    height: 50px;
    text-align:center;
} 

#lowerleftdiv {
    background-color: #00ff00;
    width: 80px;
    height: 50px;
} 

#leftdiv {
    background-color: #ff000f;
    width: 80px;
    height: 576px;
} 

#rightdiv {
    background-color: #000fff;
    width: 80px;
    height: 576px;
} 

#lowerrightdiv {
    background-color: #fff000;
    width: 80px;
    height: 50px;
}

Answer 2

将此添加到您的css：

* {
    margin: 0;
    padding: 0;
}

Answer 3

这是如何解释html的奇怪之处。 div之间的空白呈现为空格。有很多方法可以解决这个问题，而且它们都不是很漂亮。

一种方式是这样的：

<div id="leftdiv">
    <img class="arrowimg" src="leftarrow.png">
</div>
<div id="centerdiv">
</div>
<div id="rightdiv">
    <img class="arrowimg" src="rightarrow.png">
</div>
<div id="lowerleftdiv">
    ?
</div>
<div id="lowercenterdiv">
    ?
</div>
<div id="lowerrightdiv">
    ?
</div>

Answer 4

希望修复

Route::post('project-profile', 'ProjectProfileExportController@ProjectProfile');

HTML CSS之间的奇怪差距

4 个答案: