Question

所以我无法弄清楚为什么将div设置为55％而将img设置为45％会导致图像转移到下一行。这是HTML：

<section class="explanation-paragraphs-section">
    <div class="explanation-paragraphs-div">
        <h2>blah blah blah</h2>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
    </div>
    <img class="explanation-paragraphs-right-img" src="./img/office-building.jpg">
</section>

我已经使用normalize.css进行重置。相关的CSS如下：

p {
    margin: 0;
    border: 0;
    padding: 0;
}

section.explanation-paragraphs-section {
    max-width: 1000px;
    min-width: 300px;
    margin: 0 auto 2rem auto;
}

div.explanation-paragraphs-div {
    box-sizing: border-box;
    display: inline-block;
    margin: 1.5rem 0 0 0;
    width: 55%;
    vertical-align: top;
}

div.explanation-paragraphs-div p {
    margin: 1.5rem 0 0 0;
}

div.explanation-paragraphs-div h2 {
    margin: 0;
    padding: 0;
}

section.explanation-paragraphs-section img {
    box-sizing: border-box;
    display: inline-block;
    width: 44.5%;
    border-top: 1.5rem solid transparent;
    vertical-align: top;
}

img.explanation-paragraphs-left-img {
    border-right: 1.5rem solid transparent;
}

img.explanation-paragraphs-right-img {
    border-left: 1.5rem solid transparent;
}

将img的宽度设置为44.5％是一个可行的黑客攻击，但是我无法计算出任何额外宽度的贡献，以便将img的宽度设置为45％会导致img转移到下一行。

Answer 1

删除div之后的换行符，在图像之前：

<section class="explanation-paragraphs-section">
    <div class="explanation-paragraphs-div">
        <h2>blah blah blah</h2>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
    </div><img class="explanation-paragraphs-right-img" src="./img/office-building.jpg">
</section>

工作演示：http://jsfiddle.net/seancannon/7Bhy5/

Answer 2

与inline元素一样，HTML元素之间的inline-block中的空格和换行符将被视为单个空格。

您必须删除这些内容，或将父元素font-size设置为0 - 这在大多数情况下都不是实用的解决方案。

您可以inline-block float到<div>和left到<img>，而不是right。

JSFiddle

或者，如果古代浏览器支持不是问题，您可以在其容器上应用display:flex

Answer 3

将彼此相邻的内联块元素视为彼此相邻的其他内联元素。例如，一些跨越彼此并在代码中使用空格，例如：

<span>Hi</span> <span>There</span> <span>Friend</span>

像这样渲染：

你好朋友

而有些跨距彼此相邻没有以这种方式编码的空格：

<span>Hi</span><span>There</span><span>Friend</span>

像这样渲染：

HiThereFriend

彼此楔入的内联块元素显示相同的空格，因为您的代码具有换行符（渲染时解释为空白区域）。如果您的代码中只有div和img没有空格，那么额外的渲染空间就会消失。

<div class="explanation-paragraphs-div">
        <h2>blah blah blah</h2>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
    </div><img class="explanation-paragraphs-right-img" src="./img/office-building.jpg">
         ^^

请注意代码中div和img之间没有空格。

Answer 4

为了那些关注删除内联块空格的问题，删除代码块之间换行符的选项并不总是切实可行，尤其是在CMS创建块的情况下。将font-size设置为0也很成问题。这是一个笔的链接，演示了一个更有用的CSS修复：http://codepen.io/pageaffairs/pen/BfIun/

尽管边界大小仅使用边框，但元素之间的神秘空间：边框

4 个答案: