个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试围绕图像创建一个 2 列布局，但没有成功
这就是我想要的布局:
这是我目前能做的:
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
<style>
img {
float: right;
margin: 5px;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1>Testing</h1>
<div class="square">
<div>
<img style="width: 300px" src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg" alt="">
</div>
<!-- <div style="column-count: 2"> -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim. Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus. Donec auctor justo eu lobortis finibus.
Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla imperdiet arcu quis neque maximus, vel molestie est rutrum.
</p>
<!--</div>-->
</div>
</body>
</html>如果我用列样式 2 激活 div，布局将像这样一团糟:
解决这个问题的方法是什么？已经好几天了，我还没有找到任何解决方案。请帮忙。
更新
抱歉，忘记说句子必须是连续的，所以当一个句子在左栏没有完成时，它会继续到图片下方的右栏。
最佳答案
把文字分成两段，图片放在第二段， float 到最上面。
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
<style>
img {
float: right top;
margin: 5px;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1>Testing</h1>
<div class="square">
<div style="column-count: 2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim. Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus. Donec auctor justo eu lobortis finibus.</p>
<p> <img style="width: 300px" src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg" alt="">
Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla imperdiet arcu quis neque maximus, vel molestie est rutrum.
</p>
</div>
</div>
</body>
</html>关于html - 将 2 列布局环绕图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70561622/
25
4
0
我正在学习 ada 并且我正在尝试为枚举实现附加重载。 基本上我希望能够向 Day 类型添加一个 Integer 并获得生成的 Day 值。所以星期一 + 2 => 星期三。 这是我的简化代码: pr
Pycharm 具有“包围”代码片段的功能。有一些已经设置好的功能: 我想添加print()(使用python3)，我该怎么做？ 最佳答案 AFAIU，您可以为此定义自己的“实时”模板。 定义实时模板
例。我有一个包含15个对象的数组。我想从给定的索引开始枚举。假设从索引5开始，然后是上方的索引，下方，上方，下方等的索引...我确实希望它绕起来。 因此，在我的示例中，索引的顺序将是这样。 5、6、4
我需要帮助创建 UIPickerView 来环绕选项。因此，选择器不是这样的: 我希望它看起来像这样(没有“min”): 我到处找，但找不到用 Swift 2.0 实现的方法谢谢! 最佳答案 以下是有
如何让 UITextView 将其文本包裹在 UIImage 周围，如下图所示？ 图像大小不一定是事先已知的。 最佳答案 IOS 7 及以上版本: UIBezierPath * imgRect = [
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: UIScrollView. Any thoughts on implementing “infinite” scro
我像这样创建纹理: this->width = width; this->height = height; glGenFramebuffers(1, &framebuffer); glBindFram
在编码和模板化中，我经常需要换行文本的特定部分。是否有任何快捷方式可以包装当前选择，例如: Hello World "Hello World" Hello World {{ trans 'Hello
我正在做一个项目，我们有一些从数据库中填充的 Highcharts 图表；其中之一是散点图，我们需要包围放置在图表外部区域的点。 我们需要像 this 这样的图表但是我们需要散点图外部点周围的区域；使
我有一个 500 像素高和 50 像素宽的 jpg。它由 10 个 50px x 50px 的正方形组成，每个正方形包含一个从 1 到 10 的数字(1 在图像顶部，10 在底部)。 (jpg 在这里
我正在尝试为那些了解它的人创建一个类似 Microsoft Project 的元素控件。 我有一个Container Div，然后有两个子容器如下: 每个子容器都有很多内部 div，例如，我的第一个子
我有 4 个 div，一个我想向左浮动，视频播放器(加载了 jquery)，另一个包含一些将向右浮动的帮助/提示文本。这两个应该排在顶部。在视频播放器下方将是一个 div 内的表格。 当有人点击表格中
这个问题在这里已经有了答案: Proper use of flex properties when nesting flex containers (1 个回答) 关闭 4 年前。
我在使用自定义列表图像时遇到问题/其中图标隐藏在列表环绕的 float 元素后面。 http://jsfiddle.net/V8evM/ HTML This is list item n
是否可以将 textview 环绕在 textview 周围，第二个 textview 将环绕到第一个 textview 下的下一行？ 例如: 我尝试过使用 android:layout_weig
图片最能说明问题: 它只是一个 float: left 图像 ( http://jsbin.com/itihes/1 )。有什么方法可以防止纯 CSS 中的动态文本出现这个问题吗？我确实希望文本换行，
我在 C 规范中读到一点，无符号变量(特别是 unsigned short int)在整数溢出时执行一些所谓的环绕 ，尽管我在带符号的变量上找不到任何东西，除了我留下了未定义的行为。 我的教授告诉我，
如果您想要容器底部的 div，如何让文本环绕 div？ 我可以弄清楚如何让文本环绕在 div 上，只要它在顶部，但如果我尝试将它推到页面底部，文本要么不会'不要继续跨越 div 的顶部，否则 div
假设数组的长度为 1000。我正在尝试创建一种简单的方法来遍历存储在数组中的图像路径而不会越界。当涉及到单击“下一步”按钮以增加数组索引时，下面的方法使用模数很好地处理了环绕，但当我必须减少并从索引中
假设我的光标在单词 word 内.使用 vim-surround，输入序列 ysiw*将替换 word与 *word* . 问题:是否有我可以输入的单个序列来代替生成 **word** (即，单词加粗
我是一名优秀的程序员,十分优秀！