html - 使两个 div 并排排列，没有间隙

Question

我看到有人问过如何让两个 div 并排排列的问题。我可以让我的做到这一点就好了。

我的问题是他们不会互相碰撞。似乎总是有差距。

例如，我有一个宽度为 500px 的包装器 div。在那个 div 里面我有另外两个宽度为 250px 的 div。他们不会并排排队，因为彼此之间没有足够的空间。

当我将宽度设置为 248px 时，它们会排成一行，但彼此之间有 4px 的间隙。我有一个位于此处的代码示例:

https://c9.io/riotgear66/day1/workspace/sams/html/index.html

请随意查看并尝试使用浏览器的元素检查器进行调整。

Answer 1

布局问题是将 display: inline-block 应用于 div 元素的结果。

在布置内容时会考虑这些 div 元素之间的任何空白。如果您不介意源代码的外观，可以删除 div 之间的空白(换行符或回车符)。

由于您的父容器具有特定尺寸 (500px x 300px)，因此我会使用绝对定位来放置子元素。这样可以更轻松地将您的 Logo 图案放置在其他图像上。

您也可以按照其他回复中的说明使用 float ，而不是更简单或更难。

在此应用程序中，布局是固定的，因此没有针对响应式或灵活设计的设计考虑，因此任何一种方法都是有效的。

演示

您可以在以下演示中了解它是如何工作的:http://jsfiddle.net/audetwebdesign/hZ5dB/

HTML:

<div class="container">
    <div class="panel ul"></div>
    <div class="panel ur"></div>
    <div class="panel ll"></div>
    <div class="panel lr"></div>
    <div class="overlay"><span>Cats</span></div>
</div>

和CSS:

.container {
    border: 1px dotted blue;
    width: 500px;
    height: 300px;
    position: relative;
    margin: 0 auto;
}
.panel {
    width: 250px;
    height: 150px;
    position: absolute;
}
.ul {
   background: red url("http://placekitten.com/400/400") -50px -20px no-repeat;
   top: 0; left: 0;
}
.ur {
   background: red url("http://placekitten.com/300/300") 0px -30px no-repeat;
   top: 0; right: 0;
}
.ll {
   background: red url("http://placekitten.com/350/250") -20px -20px no-repeat;
   bottom: 0; left: 0;
}
.lr {
   background: red url("http://placekitten.com/300/200") 0px -30px no-repeat;
   bottom: 0; right: 0;
}
.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
}
.overlay span {
    display: block;
    background-color: gray;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    width: 80%;
    height: 80%;
    margin: 10%;
    line-height: 80px;
}

我还展示了如何在不修改原始背景图像的情况下创建圆形图案，节省了一些使用 PhotoShop 或类似软件的工作。