Question

我目前正在开发一个网站，遇到一个奇怪的问题，让我的两个div保持在同一条线上。有问题的页面在这里：http://bit.ly/13QE7Zi我正在尝试修复的div是中间的文本div和旁边的小图像。在CSS中，我将这些div设置为占用容器元素的宽度为1000px（20 + 640 + 20 + 300 + 20），但如果我这样做，则第二个div被推到下一行。它仅在我将文本div的宽度减小3 px时才有效，这是不可取的，因为这样图像的边缘不能正确地与页面的右侧对齐。这种情况发生在Chrome和Firefox中。我不想使用浮点数，因为这会打破页面的其他方面。如何让这两个div保持在同一条线上并仍然填满1000px的宽度？

Answer 1

不要将文字的width减少3 px，减少padding-right上的.looktrai-text，它不会改变它的外观，但会给予足够的空间两者都适合。

Answer 2

发生这种情况的原因是因为你有一个空间＆＃39;两个内联块之间的字符。

HTML并没有真正忽略所有空格。在两个元素之间可以有1000个空格和新行，HTML会在显示时将所有这些空间压缩为1个单独的空格。

您的内联块的设置方式使得它们的宽度加起来恰好是1000px，但是在两个包含元素之间有一条新行，它会缩小到1个空格。您的精确测量不会占用这个额外的空间，因此您的内联块会换行到下一行。

Answer 3

您可以使用border-box box-sizing。这样，元素的宽度将包括填充和边框。

Answer 4

您可以通过执行以下操作来简化代码，甚至在图像周围实现文本环绕。

免责声明：这是基于您尝试实现的结果的建议。

删除.looktrai-text和.looktrai-sidediv div
将#looktrai-content内的HTML格式化为：

<div id="looktrai-content" class="clear">
    <img src="content/looktrai_side.jpg" alt="" class="align-right" />

    <p>My paragraph text</p>

    <p>My second paragraph</p>
</div>

添加以下CSS：

img.align-right {
   float: right;
   margin: 0 20px 20px;
}

结果将如下所示：http://codepen.io/anon/pen/yjdxh

这是一种更简洁的方法，可以减少代码并最大限度地提高灵活性。

Answer 5

我会将float: left用于文本div，将float: right用于图像div并删除display: inline-block属性。这会为页脚创建一个清除问题，但可以使用众多“clearfix”黑客之一轻松修复。根据{{3}}，我首选的方法是在父容器div上使用.group类。在您的情况下，这将是<div id="looktrai-content" class="group">

两个div不会填满容器的整个宽度

5 个答案: