html - 如何阻止 div 之间发生某种形式的文本换行？

Question

当我改变字体和大小时，我得到了一些奇怪的包装，如下图所示。不确定如何阻止这种情况以及为什么会发生这种情况？

我已将 HTML 和 CSS 代码粘贴到正在使用的下方。看起来文本可能在换行？

<div class="wrap">
    <div id="block1">
    <p><img src="img/cheese1.jpg" alt="Cheese Picture" id="intro_pic" ></p>
    <h2 id="intro">
        The best selection of cheese I've ever seen! Cannot wait for our  next order!
    </h2>
</div>

</div>

    <div class="wrap">
    <div id="block2">
    <h2 id="intro2">
        The best selection of cheese I've ever seen! Cannot wait for our  next order!
    </h2>
    <p><img src="img/cheese1.jpg" alt="Cheese Picture" id="intro_pic2" ></p>
        </div>


    .wrap {
margin: 0 auto;
max-width: 58%;
-webkit-columns: 100px 2;
    box-sizing: border-box;
margin: 50px auto;
padding: 40px;
width: 78%;
border: 1px solid rgba(87,104,115, .9);
border-radius: 12px;
background: rgba(255,255,255,.9);
    }

    #intro {
padding: 1.3em 0 1.3em 0;
text-align: left;
float: right;
font-size: 3em;
line-height: 1.5;
letter-spacing: -1px; 
color: #2B9BD4;
margin: 1.35em 0 .8em 0;
 overflow: hidden;
    }

    #intro2 {
padding: 1.3em 0 1.3em 0;
text-align: right;
float: right;
font-size: 3em;
line-height: 1.5;
letter-spacing: -1px; 
color: #2B9BD4;
margin: 1.35em 0 .8em 0;
 overflow: hidden;
    }

    #intro_pic {
text-align: left;
float: right;
    }

    #intro_pic2 {
text-align: right;
float: left;
    }

Answer 1

您已经在 .wrap div 上定义了 -webkit-columns，因此它会强制内容采用列布局并像那样包装您的标题。

如果您使用的是 float 方法(在浏览器兼容性方面更加灵活)，则不需要列结构。

您的问题位于此处:

.wrap {
  margin: 0 auto;
  max-width: 58%;
  -webkit-columns: 100px 2;
  box-sizing: border-box;
  margin: 50px auto;
  padding: 40px;
  width: 78%;
  border: 1px solid rgba(87,104,115, .9);
  border-radius: 12px;
  background: rgba(255,255,255,.9);
}