0

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

4

5 回答 5

2

与其将文本减小width3 px，不如将其减小padding-right不会.looktrai-text改变它的外观，但会为两者提供足够的空间。

于 2013-07-18T14:24:20.580 回答
2

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

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

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

于 2013-07-18T14:29:31.500 回答
0

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

于 2013-07-18T14:36:58.760 回答
0

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

免责声明：这是基于您试图达到的结果的建议。

  1. 删除.looktrai-text和.looktrai-sidedivdiv

  2. 像这样格式化里面的HTML #looktrai-content：

<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>
  1. 添加以下 CSS：
img.align-right {
   float: right;
   margin: 0 20px 20px;
}

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

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

于 2013-07-18T14:34:10.853 回答
0

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

于 2013-07-18T14:27:11.223 回答