- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我希望我的标题能很好地解释我想做的事情 - 在图像周围 float 文本很容易 - 我想要相反的东西,如果我有一些文本和多个图像,我希望图像在图像周围 float 文本。
Google 几乎只返回“图像周围的 float 文本”,所以我希望你们能提供帮助。
例如假设我有这个 HTML(请忽略内联样式):
<div>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<p>Formula One, also known as Formula 1 or F1 and referred to officially as the FIA Formula One World Championship,[2] is the highest class of single-seater auto racing sanctioned by the Fédération Internationale de l'Automobile (FIA). The "formula", designated in the name, refers to a set of rules with which all participants' cars must comply.[3] The F1 season consists of a series of races, known as Grands Prix (from French, originally meaning great prizes), held throughout the world on purpose-built circuits and public roads. The results of each race are evaluated using a points system to determine two annual World Championships, one for the drivers and one for the constructors. The racing drivers, constructor teams, track officials, organisers, and circuits are required to be holders of valid Super Licences, the highest class of racing licence issued by the FIA.[4]</p>
<p>F1 cars are the fastest multi-turn circuit-racing cars in the world, owing to very high cornering speeds achieved through the generation of large amounts of aerodynamic downforce. Formula One cars race at speeds of up to 350 km/h (220 mph) with engines currently limited in performance to a maximum of 15,000 RPM. The cars are capable of lateral acceleration in excess of five g in corners. The performance of the cars is very dependent on electronics – although traction control and other driving aids have been banned since 2008 – and on aerodynamics, suspension and tyres. The formula has radically evolved and changed through the history of the sport.</p>
<p>While Europe is the sport's traditional base, and hosts about half of each year's races, the sport's scope has expanded significantly during recent years and an increasing number of Grands Prix are held on other continents. F1 had a total global television audience of 527 million people during the course of the 2010 season.[5]</p>
<p>Grand Prix racing began in 1906 and became the most popular type internationally in the second half of the twentieth century. The Formula One Group is the legal holder of the commercial rights.[6] With annual spending totalling billions of US dollars, Formula One's economic effect and creation of jobs is significant, and its financial and political battles are widely reported. Its high profile and popularity have created a major merchandising environment, which has resulted in great investments from sponsors and budgets in the hundreds of millions for the constructors. Since 2000 the sport's spiraling expenditures have forced several teams, including manufacturers' works teams, into bankruptcy. Others have been bought out by companies wanting to establish a presence within the sport, which strictly limits the number of participant teams.</p>
现在这几乎可以实现我想要的,直到图像的数量意味着图像比文本“长”。当图像比文本长时,我希望它们在文本下方环绕,例如
text text text text IMAGE
text text text text IMAGE
text text text text IMAGE
text text text text IMAGE
IMAGE IMAGE IMAGE IMAGE
IMAGE IMAGE IMAGE IMAGE
这可能吗?我需要仅使用 HTML 和 CSS 来实现它。
对于我要执行此操作的每个页面,文本长度和图像数量可能不同。
感谢所有回复的人。
这是我使用下面的友善答案开发的解决方案 - 我没有得到我最初想要的东西,但我得到了满足我目的的东西。请注意,这会将图像放在左侧 - 不是上面最初要求的右侧 - 它在左侧看起来更整洁。
HTML:
<div id="maindata">
<div id="maintext">
<h2>Ferrari</h2>
<p>They are red.</p>
<P>I like them</p>
</div>
<img class="image" src="http://www.myimagehost.com/ferrari1.jpg" />
<img class="image" src="http://www.myimagehost.com/ferrari2.jpg" />
<img class="image" src="http://www.myimagehost.com/ferrari3.jpg" />
<img class="image" src="http://www.myimagehost.com/ferrari4.jpg" />
<img class="image" src="http://www.myimagehost.com/ferrari5.jpg" />
<img class="image" src="http://www.myimagehost.com/ferrari6.jpg" />
</div>
CSS:
#maindata {
float: left;
width: 100%;
}
#maindata #maintext{
margin-top: 15px;
float: right;
width: 63%;
padding: 10px;
}
#maindata .image{
max-width:28%;
margin-top: 15px;
padding: 10px;
}
fiddle 解决方案:http://jsfiddle.net/k0rsc5u7/
最佳答案
我首先将文本“容器” float 到左侧,宽度小于页面宽度,这样您就有空间放置图像,然后添加图像。
它们应该在文本之后开始,然后在到达底部后落到页面左侧。
可能还有其他事情需要考虑,例如当您的图像位于文本的右侧时,在您的示例中它们是一个在另一个之上,然后当它们落在左侧时,它们并排 -您可能需要更多的 html/css 来对此进行排序。
关于HTML CSS 在文本周围 float 图像而不是在图像周围 float 文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22248513/
我知道问题的标题听起来很奇怪,但我不知道该怎么调用它。 首先,我有一个网格布局,我希望我的 .search-wrapper 宽度为 50% 并向右浮动。在我的演示中 jsfiddle整个 .searc
我们正在使用 QA-C 来实现 MISRA C++ 一致性,但是该工具会为这样的代码喷出错误: float a = foo(); float b = bar(); float c = a - b; 据
考虑 float a[] = { 0.1, 0.2, 0.3}; 我很困惑a稍后传递给函数 foo(float* A) .不应该是 float* 类型的变量指向单个浮点数,对吗?就像这里提到的tu
这可能是我一段时间以来收到的最好的错误消息,我很好奇出了什么问题。 原代码 float currElbowAngle = LeftArm ? Elbow.transform.localRotation
刚开始学习 F#,我正在尝试为 e 生成和评估泰勒级数的前 10 项。我最初编写了这段代码来计算它: let fact n = function | 0 -> 1 | _ -> [1
我已经使用 Erlang 读取二进制文件中的 4 个字节(小端)。 在尝试将二进制转换为浮点时,我一直遇到以下错误: ** exception error: bad argument in
假设我有: float a = 3 // (gdb) p/f a = 3 float b = 299792458 // (gdb) p/f b = 29979244
我每次都想在浏览器顶部修复这个框。但是右边有一些问题我不知道如何解决所以我寻求帮助。 #StickyBar #RightSideOfStickyBar { float : right ; }
我正在研究 C# 编译器并试图理解数学运算规则。 我发现在两种不同的原始类型之间使用 == 运算符时会出现难以理解的行为。 int a = 1; float b = 1.0f; Cons
假设我有: float a = 3 // (gdb) p/f a = 3 float b = 299792458 // (gdb) p/f b = 29979244
Denormals众所周知,与正常情况相比,表现严重不佳,大约是 100 倍。这经常导致 unexpected软件 problems . 我很好奇,从 CPU 架构的角度来看,为什么非规范化必须是 那
我有一个由两个 float 组成的区间,并且需要生成 20 个随机数,看起来介于两个 float 定义的区间之间。 比方说: float a = 12.49953f float b = 39.1123
我正在构建如下矩阵: QMatrix4x3 floatPos4x3 = QMatrix4x3( floatPos0.at(0), floatPos1.at(0), floatPos2.at(0),
给定归一化的浮点数f,在f之前/之后的下一个归一化浮点数是多少。 通过微动,提取尾数和指数,我得到了: next_normalized(double&){ if mantissa is n
关于 CSS“float”属性的某些东西一直让我感到困惑。为什么将“float”属性应用到您希望 float 的元素之前的元素? 为了帮助可视化我的问题,我创建了以下 jsFiddle http://
关于 CSS“float”属性的某些东西一直让我感到困惑。为什么将“float”属性应用到您希望 float 的元素之前的元素? 为了帮助可视化我的问题,我创建了以下 jsFiddle http://
我有一个新闻源/聊天框。每个条目包含两个跨度:#user 和#message。我希望#user 向左浮动,而#message 向左浮动。如果#message 导致行超过容器宽度,#message 应该
我想创建一个“记分卡”网格来输出一些数据。如果每个 div.item 中的数据都具有相同的高度,那么在每个 div.item 上留下一个简单的 float 会提供一个漂亮的均匀布局,它可以根据浏览器大
我正在学习使用 CSS float 属性。我想了解此属性的特定效果。 考虑以下简单的 HTML 元素: div1 div2 This is a paragraph 以及以下 CSS 规则: div {
我正在尝试从可以是 int 或 float 的文件中提取数据。我发现这个正则表达式将从文件 (\d+(\.\d+)?) 中提取这两种类型,但我遇到的问题是它将 float 拆分为两个。 >>> imp
我是一名优秀的程序员,十分优秀!