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

【问题标题】：Two divs won't fill entire width of container两个 div 不会填满容器的整个宽度
【发布时间】：2013-07-18 22:36:58
【问题描述】：

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

【问题讨论】：

标签： css html

【解决方案1】：

发生这种情况的原因是您的两个内联块之间有一个“空格”字符。

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

你的内联块的设置方式是它们的宽度加起来正好是 1000 像素，但是你在两个包含元素之间有一条新线，它压缩到 1 个空格。您的精确测量没有考虑到这个额外的空间，因此您的内联块会换行到下一行。

【讨论】：

Here 是解决这个问题的一些方法。
谢谢！你是对的，摆脱了修复它的 div 之间的换行符，而无需对容器填充进行变通。

【解决方案2】：

不要将文本的 width 减少 3 像素，而是将 .looktrai-text 上的 padding-right 减少它不会改变它的外观，但会为两者提供足够的空间来适应。

【讨论】：

谢谢。这帮助我走上了正确的轨道。我最终减少了looktrai-content上的padding-right，以便页面的右边距对齐。
@NeuroXc 很高兴它帮助您随时接受答案，如果它解决了您的问题，祝您编码愉快。

【解决方案3】：

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

【讨论】：

我的一位同事提出了这个建议，不幸的是它没有解决问题。
不会，但会帮助您更轻松地计算所用元素的宽度。

【解决方案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

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

【讨论】：

【解决方案5】：

我会使用 float: left 作为文本 div，使用 float: right 作为图像 div 并删除 display: inline-block 属性。这为页脚创建了一个清除问题，但是使用许多“clearfix”黑客之一很容易解决这个问题。根据this article on CSS Tricks，我首选的方法是在父容器div 上使用.group 类。在您的情况下，这将是 <div id="looktrai-content" class="group">

【讨论】：