【发布时间】：2020-05-25 13:45:44
【问题描述】：
我正在尝试设置图像和文本，以便对于非常宽的视口，文本设置在两列中，图像浮动在第一列中。当有大量文本时，一切正常，但在没有文本时，在某些情况下，第二列顶部的文本中会出现间隙。看起来图像填充以某种方式流入第二列，如下图所示：
显然我不想要那个差距。
更改图像上的 padding-bottom 似乎可以解决问题，但它在其他设备上的重新出现会略有不同。需要进行更根本的修复。
CSS 不是我的强项，但我花了很长时间试图找到对此类问题的引用并管理填充和溢出，但到目前为止都无济于事。任何提示将不胜感激。
body {
margin: 0px;
background-color: #ffffff;
color: #333333;
font-family: 'Trebuchet MS', 'Fira Sans', sans-serif;
}
/* Override Bootstrap/Normalize defaults */
h1, .h1 {
font-size: 24px;
}
#titlearea {
text-align: center;
}
#titlearea h1 {
margin-top: 1.0rem;
margin-bottom: 1.0rem;
}
.bio-image {
width: 38%;
}
@media (min-width:768px) {
}
@media (min-width:992px) {
.split2columns {
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-moz-column-count: 2;
-moz-column-gap: 20px;
column-count: 2;
column-gap: 20px;
min-height: 0;
}
}<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Padding Overflow</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i&subset=cyrillic,cyrillic-ext,greek,latin-ext">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body class="zmso-public">
<div class="container">
<div id="titlearea">
<div class="row">
<div class="d-md-none col-8 offset-2">
<img width='100%' src="https://i.postimg.cc/v83szFQ9/image360x540.jpg"/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-10 offset-xl-1">
<h1 class="text-center text-md-left">Title</h1>
</div>
</div>
</div>
<div id="infoarea">
<div class="row">
<div class="split2columns col-xs-12 col-xl-10 offset-xl-1">
<span class="d-none d-md-inline float-md-left pr-md-3 pb-md-3 bio-image"> <img width='100%' src="https://i.postimg.cc/v83szFQ9/image360x540.jpg"/></span>
<div class="rich-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nullam non nisi est sit amet facilisis magna. Suspendisse ultrices gravida dictum fusce ut placerat. Tellus in metus vulputate eu scelerisque. Fermentum iaculis eu non diam phasellus vestibulum lorem sed. Non sodales neque sodales ut etiam sit amet. Et ligula ullam corpera futis.</p><p>Non consectetur a erat nam at lectus urna. Dignissim sodales ut eu sem integer vitae justo. Mi in nulla posuere sollicitudin aliquam ultrices. Sed sed risus pretium quam vulputate.</p><p>Id diam vel quam elementum. Eu non diam phasellus vestibulum lorem. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis.</p></div>
</div>
</div>
</div>
</div>
</body>
</html>您需要使结果窗口足够宽以显示问题。在 https://jsfiddle.net/nhsyuqac/ 的 JSFiddle 中更容易看到这一点。对我（在 Mac 上）来说，当结果窗口宽于 1200 像素，Chrome 宽于 992 像素时，它会出现在 Firefox 上（尽管确切的字体、字体大小和行高会影响这一点 - 它在浏览器中的本机行为略有不同）在 JSFiddle 中。）
【问题讨论】：
标签： html css bootstrap-4 overflow multiple-columns