- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
与图像对齐不起作用
我有一个段落,我在 <p>
中使用引述图像作为背景和大量文本。标签。我正在尝试显示图像,所有文本都与图像右侧对齐,在 <p>
之前标签,但图像似乎显示在其中,这是我不想要的。我创建了一个 fiddle 以使其更容易看到:JSFiddle
这是我的 CSS:
.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.blockquote {
font-size: 14px;
font-family: 'Times', serif;
font-style: italic;
color: #222222;
background-color: #f7f7f7;
background-image: url(http://somesite/Icon_Quote.png);
background-position: left top;
background-repeat: no-repeat;
min-height: 40px;
padding: 10px;
margin-bottom: 10px;
}
.QuoteTextToLeft {
float: left;
margin: 50px 10px 10px 10px;
}
和 HTML:
<div class="container_12">
<div>
<img class="QuoteTextToLeft" src="http://someothersite/man.png"
alt="" width="200" height="250" />
<a id="andrew_reeder"></a>
<p class="blockquote">START HERE - this is a test, ... (snipped)
<br />
<br />this is a test, a test of the emergency broadcast system....
<br />
<br />this is a test, a test of the emergency broadcast system....
<br />
<br />this is a test, a test of the emergency broadcast system....
<br />
<br />Someone who cares
<br />
<br />Some title</p>
</div>
我想做的是将图像显示在 <p class="blockquote">
之外标记,以便引用图片位于显示“从这里开始”的位置。
这是它目前的样子:
我希望它看起来像这样:
最佳答案
最好不要将其设为背景图片。
.blockquote {
font-size:14px;
font-family:'Times', serif;
font-style:italic;
color:#222222;
background-color:#f7f7f7;
min-height:40px;
padding:10px;
margin-bottom:10px;
}
.blockquote:before {
content:url('http://pokemonresource.wikinet.org/w/images/pokemonresource/uploads/a/a8/Icon_Quote.png');
margin-right:10px;
float:left;
}
这是一个 CSS3 解决方案...我们正在利用 :before
伪类来指定在每个 .blockquote
元素之前添加的内容。
我们将 content
属性设置为图像的 url(取决于它是什么类型的文件,你会得到不同的结果——因为这是一个 png 文件,它显示图像定期)。
为了让引号的其余部分换行而不仅仅是第一行,我们使用 float:left
。最后,为了调整间距,我们添加了右边距。
这适用于任何尺寸的图像。
这是原始版本的修改版本:Demo
这是一张放大了的图片(引用保持不变):Demo
此外,我想指出您正在使用已弃用的方法来调整图像大小——请使用 CSS 而不是 width
/height
属性。
最后一件事:除非您使用的是 XHTML 文档类型,否则您不需要在某些元素的末尾使用正斜杠。这是一种古老的自闭合标签方法,但 HTML5 文档类型不需要它。 :)
关于html - 将 <p> 与图像对齐不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17561042/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!