0

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

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

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

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

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

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

4

3 回答 3

1

问题出在 HTML 中的空白处。使用时display: inline-block，元素后的空格会像 Marc Audet 所说的那样被考虑在内。

要在不更改当前方法的情况下修复它，您必须删除该空白。我发现在保持 HTML 可读性的同时这样做的最简单方法是注释掉它，或者<!--在每个元素之后和-->下一个元素之前使用。这样可以避免更改整个结构，您也可以再次将每个结构设置为 250px

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

这是引用这种情况并提供更多详细信息的 CSS 技巧页面

于 2013-08-21T16:09:54.673 回答
1

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

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

由于您的父容器具有特定尺寸（500 像素 x 300 像素），因此我将使用绝对定位来放置子元素。这将使您的徽标主题更容易定位在其他图像上。

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

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

演示

您可以在以下演示中看到这可能是如何工作的：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 或类似工具的工作。

于 2013-08-21T15:58:52.667 回答
1

你不应该使用

display: inline-block;

使他们：

float: left;

这是一个 jsfiddle 示例，说明它应该是怎样的。

http://jsfiddle.net/Tqdqa/

于 2013-08-21T16:04:41.010 回答