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），因此我将使用绝对定位来放置子元素。这样可以更轻松地将徽标图案定位在其他图像上。

您也可以使用其他回复中所述的花车，而不是更容易或更难。

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

演示

您可以在以下演示中看到它的工作原理：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或类似工具节省了一些工作。

Answer 2

你不应该使用

display: inline-block;

制作它们：

float: left;

这是一个如何应用的jsfiddle示例。

http://jsfiddle.net/Tqdqa/

Answer 3

问题在于HTML中的空白区域。当使用display: inline-block时，像Marc Audet所说的那样考虑元素之后的空格。

要修改它而不更改当前方法，您必须删除该空白区域。在保持HTML可读性的同时，我发现这样做的最简单方法是将其注释掉，或者在每个元素之后使用。这可以防止必须改变整个结构，你也可以再次使每个250px

您还可以将结束>移至下一行，在开始<div>之后将所有内容移至下一行，或者在第一行后使用margin-left:-4px;。或者使用其他人描述的方法，浮动它或使用FlexBox

Here is the CSS Tricks page that references this situation and provides more detail

制作两个div并排排列

3 个答案:

演示