gpt4 book ai didi

html - 带有 float 图像的段落、列表、 block 引用

转载 作者:太空宇宙 更新时间:2023-11-03 22:01:38 24 4
gpt4 key购买 nike

我有一个简单的例子:

<html>
<head>
<style type="text/css">
img {
float: left;
padding-left: 50px;
}
blockquote {
background-color: #FF0;
}
</style>
</head>
<body>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/HTML.svg/200px-HTML.svg.png" />
<p>
paragraph
</p>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<blockquote>
<p>
blockquoted paragraph
</p>
</blockquote>
</div>
</body>
</html>

因此,页面的外观是:

The page with the image

没有图片的同一页面:

The page without the image

我必须结合第二个示例中的文本对齐方式和向左浮动的图像(对齐线标记为红色):

An ideal page

最佳答案

你可以像这样使用 display:inline

<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/HTML.svg/200px-HTML.svg.png" />

<div style="display:inline-block;">
<p>
paragraph
</p>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<blockquote>
<p>
blockquoted paragraph
</p>


</blockquote>
</div>
</div>​

关于html - 带有 float 图像的段落、列表、 block 引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10203932/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com