列数将图像减半
Column count cuts image in half
我在页面上有一大段文字，当屏幕变大时，我有媒体查询来使文字形成列。但是，当我这样做时，有些照片并没有完全进入一栏。
无论出于何种原因，它都会拆分照片并将其一部分显示在一栏的底部，其余部分显示在下一栏。 divs 也会发生这种情况。如果我交换了白色特征 div 和图像，那么它也会分裂自己。
这是我的部分代码和一个简单的例子：
.content-heading h1{
border-top: 10px solid;
margin-top: 100px;
padding-top: 15px;
line-height: 1;
display: inline-block;
}
.content-heading h2{
padding-bottom: 15px;
margin-bottom: 50px;
}
.img-box{
background-position: center top;
background-size:cover;
border-radius: 8px;
height: 250px;
width: 250px;
border: 8px solid #fff;
}
.container-fluid.no-pad{
padding:0;
}
#youth-development{
color: #fff;
position: relative;
background: rgba(244, 121, 32, 1);
}
#youth-development h1{
border-top: 10px solid #fff;
padding-top: 15px;
margin-top: 0;
display: inline-block;
padding-right: 99px;
}
#youth-development h2{
padding-bottom: 15px;
}
#youth-development .column-content{
column-count:2;
padding-bottom: 100px;
}
#youth-development ul{
list-style-type: none;
padding-left: 10px;
color: #fcaf18;
font-size: 20px;
}
#youth-development .img-box{
background-image: url('http://www.fillmurray.com/200/300');
float: left;
margin-right: 20px;
}
#youth-development .feature-p{
float: right;
width: 400px;
background-color: #fff;
color: #6d6d6d;
padding: 15px;
border-radius: 8px;
}
#youth-development .feature-p h4{
color: #f57920;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid no-pad">
<section id="youth-development">
<div class="row no-gutters justify-content-center">
<div class="col-sm-10 content-heading">
<h1>Safety Around Water</h1>
<h2>For Youth Development</h2>
</div>
</div>
<div class="row no-gutters justify-content-center">
<div class="col-sm-10 column-content">
<div class="feature-p">
<h4>The statistics are shocking:</h4>
<ul>
<li>- Children ages 1 to 4 have the highest drowning rates.</li>
<li>- For kids under age 12, drowning is the second leading cause of accidental death.</li>
<li>- Two children die every day because of drowning.</li>
</ul>
</div>
<p>Drowning can happen nearly anywhere with standing water. Every child deserves to know
how to be safe around water. As America’s swim instructor, and one of the most accessible
community resources to prevent drowning, YMCAs across the country have committed to
helping children learn the invaluable skill of swimming and water safety through a variety of
programs.</p>
<p>Safety Around Water is a grant-funded program that helps children learn how to perform a
sequenced set of skills over eight lessons of 40 minutes each. During that time the risk of
drowning is reduced and children are given confidence in and around water.
A typical session includes exercises to help kids adjust to being in water; instruction in
“Jump, Push, Turn, Grab” and “Swim, Float, Swim,” two skill sets kids can use if they
unexpectedly find themselves in the water; and specific safety topics, like what to do if you
see someone in the water who needs help. Participants also have fun in the process!
In 2017, 1,608 children were served through Safety Around Water at Jerry Long, William G.
White, Jr., Kernersville, Davie, Stokes, and Statesville Family YMCAs. Additionally, Wilkes
Family YMCA provides 400 pre-K students with swimming lessons through United Way
Funding.</p>
<div class="img-box"></div>
<p>Through a longstanding partnership with Davie County Schools, every second grader visits
the Davie Family YMCA for the Safety Around Water program. Ethan was one of those
students who first learned to swim at the Y. He started off in the beginner class but was
eager to swim and made it his goal to wear a green band and be able to swim anywhere in
the pool by himself. A green band is the designation given to child who passed the YMCA
Swimmer Classification Test. In four days, Ethan learned rhythmic breathing, front stroke,
backstroke, and how to be safe around water. Ethan is now confident around water and
increased his knowledge of boating safety. </p>
<p>He left the Second-Grade Safety Around Water program with his green band and is now
competing for the YMCA Tyde swim team. After learning all four competitive strokes
(breaststroke, backstroke, freestyle, butterfly), Ethan is helping new swimmers who join
Tyde. Ethan and his family come to the Davie Family YMCA to swim for fun and Ethan’s little
brother is learning to swim. </p>
<p>Swim lessons are the next step in helping children not only stay safe, but also develop a
lifelong love of the water. Across the Association, 3,370 individuals were served through
swim lessons in 2017.</p>
</div>
</div>
</section>
</div>
我将文本从 1 列变成 2 列，然后是 3 列，所以尝试手动 divide 将文本变成 bootstrap 列对我来说很困难'我正在努力实现。有没有办法解决这个 column-count 问题？
根据文字字距拆分文字，图片位置高于字距。这取决于浏览器如何做到这一点。 Firefox 似乎工作正常，Chrome 没有。一种解决方案可能是在 div 上添加一些垂直填充。
您可以对不应拆分的元素使用 page-break-inside: avoid;。 （column-break 被视为 page-break）
您的 bootstrap 标签需要一些改进。这是一个 link 示例，其中包含如下列：
- xs - sm: 1 列
- md+: 2 列
bootstap 标签遵循以下模式：
<div class="container>
<div class="row">
<div class="col-12 col-md-6">
<div class="col-12 col-md-6">
</div>
</div>
https://plnkr.co/edit/T1AhrX7NYRspiC29Jc75?p=preview
您正在使用的 css 与 bootstrap 正在尝试做的一些事情相悖。一旦您正确设置了 bootstap 标签，您将需要 re-work 其中一些。
CSS 需要修改如下：
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
请检查 Link 以更好地理解事情。
我在页面上有一大段文字，当屏幕变大时，我有媒体查询来使文字形成列。但是，当我这样做时，有些照片并没有完全进入一栏。
无论出于何种原因，它都会拆分照片并将其一部分显示在一栏的底部，其余部分显示在下一栏。 divs 也会发生这种情况。如果我交换了白色特征 div 和图像，那么它也会分裂自己。
这是我的部分代码和一个简单的例子：
.content-heading h1{
border-top: 10px solid;
margin-top: 100px;
padding-top: 15px;
line-height: 1;
display: inline-block;
}
.content-heading h2{
padding-bottom: 15px;
margin-bottom: 50px;
}
.img-box{
background-position: center top;
background-size:cover;
border-radius: 8px;
height: 250px;
width: 250px;
border: 8px solid #fff;
}
.container-fluid.no-pad{
padding:0;
}
#youth-development{
color: #fff;
position: relative;
background: rgba(244, 121, 32, 1);
}
#youth-development h1{
border-top: 10px solid #fff;
padding-top: 15px;
margin-top: 0;
display: inline-block;
padding-right: 99px;
}
#youth-development h2{
padding-bottom: 15px;
}
#youth-development .column-content{
column-count:2;
padding-bottom: 100px;
}
#youth-development ul{
list-style-type: none;
padding-left: 10px;
color: #fcaf18;
font-size: 20px;
}
#youth-development .img-box{
background-image: url('http://www.fillmurray.com/200/300');
float: left;
margin-right: 20px;
}
#youth-development .feature-p{
float: right;
width: 400px;
background-color: #fff;
color: #6d6d6d;
padding: 15px;
border-radius: 8px;
}
#youth-development .feature-p h4{
color: #f57920;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid no-pad">
<section id="youth-development">
<div class="row no-gutters justify-content-center">
<div class="col-sm-10 content-heading">
<h1>Safety Around Water</h1>
<h2>For Youth Development</h2>
</div>
</div>
<div class="row no-gutters justify-content-center">
<div class="col-sm-10 column-content">
<div class="feature-p">
<h4>The statistics are shocking:</h4>
<ul>
<li>- Children ages 1 to 4 have the highest drowning rates.</li>
<li>- For kids under age 12, drowning is the second leading cause of accidental death.</li>
<li>- Two children die every day because of drowning.</li>
</ul>
</div>
<p>Drowning can happen nearly anywhere with standing water. Every child deserves to know
how to be safe around water. As America’s swim instructor, and one of the most accessible
community resources to prevent drowning, YMCAs across the country have committed to
helping children learn the invaluable skill of swimming and water safety through a variety of
programs.</p>
<p>Safety Around Water is a grant-funded program that helps children learn how to perform a
sequenced set of skills over eight lessons of 40 minutes each. During that time the risk of
drowning is reduced and children are given confidence in and around water.
A typical session includes exercises to help kids adjust to being in water; instruction in
“Jump, Push, Turn, Grab” and “Swim, Float, Swim,” two skill sets kids can use if they
unexpectedly find themselves in the water; and specific safety topics, like what to do if you
see someone in the water who needs help. Participants also have fun in the process!
In 2017, 1,608 children were served through Safety Around Water at Jerry Long, William G.
White, Jr., Kernersville, Davie, Stokes, and Statesville Family YMCAs. Additionally, Wilkes
Family YMCA provides 400 pre-K students with swimming lessons through United Way
Funding.</p>
<div class="img-box"></div>
<p>Through a longstanding partnership with Davie County Schools, every second grader visits
the Davie Family YMCA for the Safety Around Water program. Ethan was one of those
students who first learned to swim at the Y. He started off in the beginner class but was
eager to swim and made it his goal to wear a green band and be able to swim anywhere in
the pool by himself. A green band is the designation given to child who passed the YMCA
Swimmer Classification Test. In four days, Ethan learned rhythmic breathing, front stroke,
backstroke, and how to be safe around water. Ethan is now confident around water and
increased his knowledge of boating safety. </p>
<p>He left the Second-Grade Safety Around Water program with his green band and is now
competing for the YMCA Tyde swim team. After learning all four competitive strokes
(breaststroke, backstroke, freestyle, butterfly), Ethan is helping new swimmers who join
Tyde. Ethan and his family come to the Davie Family YMCA to swim for fun and Ethan’s little
brother is learning to swim. </p>
<p>Swim lessons are the next step in helping children not only stay safe, but also develop a
lifelong love of the water. Across the Association, 3,370 individuals were served through
swim lessons in 2017.</p>
</div>
</div>
</section>
</div>
我将文本从 1 列变成 2 列，然后是 3 列，所以尝试手动 divide 将文本变成 bootstrap 列对我来说很困难'我正在努力实现。有没有办法解决这个 column-count 问题？
根据文字字距拆分文字，图片位置高于字距。这取决于浏览器如何做到这一点。 Firefox 似乎工作正常，Chrome 没有。一种解决方案可能是在 div 上添加一些垂直填充。
您可以对不应拆分的元素使用 page-break-inside: avoid;。 （column-break 被视为 page-break）
您的 bootstrap 标签需要一些改进。这是一个 link 示例，其中包含如下列：
- xs - sm: 1 列
- md+: 2 列
bootstap 标签遵循以下模式：
<div class="container>
<div class="row">
<div class="col-12 col-md-6">
<div class="col-12 col-md-6">
</div>
</div>
https://plnkr.co/edit/T1AhrX7NYRspiC29Jc75?p=preview
您正在使用的 css 与 bootstrap 正在尝试做的一些事情相悖。一旦您正确设置了 bootstap 标签，您将需要 re-work 其中一些。
CSS 需要修改如下：
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
请检查 Link 以更好地理解事情。