列数将图像减半

2024-03-04

我在页面上有很大一部分文本,当屏幕更大时,我可以使用媒体查询来使文本形成列。然而,当我这样做时,有些照片没有完全进入一栏。

无论出于何种原因,它都会分割照片并将其一部分显示在一列的底部,并将其余部分显示在下一列中。 div 也会发生这种情况。如果我交换白色特征 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 列,因此尝试手动将文本划分为引导列对于我想要实现的目标来说是很困难的。有没有办法解决这个问题column-count issue?


您可以使用page-break-inside: avoid;不应该拆分的元素。 (分栏符被视为分页符)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

列数将图像减半 的相关文章

  • 如何在Shiny中默认选择verbatimTextOutput中的文本?

    这是与我之前的问题相关的问题 是否可以有固定宽度的 verbatimTextOutput 并让文本在 Shiny 中换行 https stackoverflow com q 58516071 7669809 我有以下闪亮的应用程序 http
  • 联系表 7 中的占位符 - Wordpress

    我正在为我的客户制作一个网站 但遇到了问题 我使用Contact Form 7在wordpress中制作了一个联系表单 这个插件确实很容易使用 但是当我想使用插件的占位符属性时 它在加载页面时没有显示占位符 这就是我在联系表 7 中设置占位
  • SVG 内部跨度与文本不在同一行

    我在一个跨度内有一个 SVG 文件 同时包含文本 文本和 SVG 的高度相同 但是 SVG 与文本不在同一行 相关jsfiddle https jsfiddle net tcrnjd53 https jsfiddle net tcrnjd5
  • 您可以使用 CSS 或 JavaScript 创建渐变为不透明的渐变吗?

    WebKit 引入了创建 CSS 渐变的功能 例如 使用以下代码 webkit gradient linear left top left bottom from fff to 000 但是 是否可以使用 CSS 实现不透明度渐变 我希望渐
  • CSS 中的重叠图像

    如何让 mymessage gif 显示在 bread wine jpg 之上 mymessage gif 具有透明背景
  • 超大图像缩小后变得模糊

    这是我第一次尝试响应式设计 所以如果这是一个愚蠢的简单问题 请原谅 我创建了一个图像并将其最大宽度设置为不大于图像的实际宽度 因为我知道放大图像会导致模糊不清 我有点困惑的是 当我缩小窗口并且图像开始缩小时 它也变得模糊 这是正确的行为吗
  • 如何使用 CSS 使表格中的分隔线/边框消失?

    我有一个简单的 HTML 表格 我希望分隔线 边框 消失 所需的最终结果是一个除了实际文本之外不可见的表格 我尝试将 border 属性设置为 0 但没有帮助 我应该使用什么正确的 CSS 属性 table tr td th border
  • HTML DOM 宽度 + 可见窗口高度

    如何获取浏览器打开时可用空间的当前高度和宽度 我不需要整个文档的高度 只需要屏幕上可见的高度 你可以看看这个博客文章 http www howtocreate co uk tutorials javascript browserwindow
  • Facebook 分享不显示来自开放图元标签的图像

    我正在尝试将 Facebook 共享按钮集成到我雇主的网站 标题 网址 描述 简介均显示正确 但未附加任何图像 当共享对话框打开时 图像容器会闪烁 然后消失 就好像 facebook 正在尝试处理图像但失败一样 我正在使用 og image
  • 下拉菜单将导航栏向下推。如何避免呢?

    我是引导程序和网络开发的新手 我想构建一个具有两个导航栏的网页 并且根据屏幕尺寸 仅显示一个导航栏 对于屏幕尺寸 gt 768px 一切工作正常 至少看起来 对于较低的分辨率 下拉菜单将导航栏向下推到内容上方 如何避免这种情况 任何形式的帮
  • 有没有带有保存和语法突出显示功能的 HTML、CSS 在线文本编辑器?

    我想让 css 文件可以从任何地方 家庭 办公室等 访问并准备好编辑 并保存 我将进行手工编码 只想语法突出显示并保存在网络设施上 我尝试了谷歌文档 这很好 因为我可以在线保存 而且它也有修订历史记录功能 这很有用 但它没有语法突出显示 也
  • 从 onclick 属性调用 e.stopImmediatePropagation()

    如何从事件对象中获取事件对象onclick属性 我努力了 a href something html Click me a 另外 我也尝试过这个 a href something html Click me a 但控制台只显示 a 元素 我
  • 如何对结构切片而不是切片结构进行范围调整

    稍微玩了一下 Go HTML 模板后 我发现的所有循环模板中对象的示例都是将切片结构传递给模板 有点像这个示例 type UserList struct Id int Name string var templates template M
  • 如何使用 JQuery 提取嵌套 HTML 中的文本?

    我这里有 HTML 代码 div class actResult style border solid table tbody tr td Order Number td td 1 td tr tr td Customer Number t
  • Bootstrap 居中 div 内的文本左对齐

    我有一段 4 行诗 位于居中的 div 中 因为它是诗歌 所以我需要将 4 行左对齐 但不要对齐到 div 的左侧 这是它的居中方式 Lorem ipsum dolor sit amet onsectetur adipisicin Dolo
  • 单击按钮滚动到特定 div

    我有一个具有固定菜单和内容框 div 的页面 单击菜单时 内容框滚动到特定 div 到目前为止 一切都很好 这是这里的示例 https jsfiddle net ezrinn 8cdjsmb9 11 https jsfiddle net e
  • 如何使用 facebook 用户登录我的网站?

    我想知道 facebook 如何让用户登录我们的网站 我的意思是用户需要注册到我的网站才能发表评论 我如何通过我的 php 代码检查它是否是登录用户 我听说你只能用javascript检查它是否是登录用户 感谢您的任何解释 您可以使用脸书
  • CSS:结合纹理和颜色

    有人如何将用作背景图像的纹理和该纹理上方的背景颜色结合起来 这是纹理 我希望我的正文背景页面是这样的 我正在努力处理背景图像和背景颜色 http jsfiddle net 87K72 http jsfiddle net 87K72 body
  • Python Flask 不更新图像[重复]

    这个问题在这里已经有答案了 这里有一些关于图像的 Flask 问题 但没有一个能解决我的问题 我有一个应用程序可以创建图像 保存它 然后显示它 一次 它应该多次执行此操作 每次更改图像时 它应该加载新图像 它不是 它只显示与其显示的文件名关
  • 当页面加载图像时,它是只加载一次,还是每次在标记中找到它时加载?

    当页面加载图像时 它是只加载一次 还是每次在标记中找到它时加载 那么 jquery 呢 附加一个 img 会导致它再次重新加载吗 我问这个问题是因为我有高分辨率图像 但需要在标记的许多情况下使用它 img src hello jpg img

随机推荐