如何阻止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，因此它会强制内容采用列布局并将您的标题包裹起来。

如果您使用浮动方法（在浏览器兼容性方面更灵活），则不需要列结构。

您的问题位于此处：

.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);
}