我正在尝试一些东西。我需要右侧的仪表(彩色条)和左侧的文本。问题是仪表没有超过文本。请参阅下图了解我的意思:
<html>
<head>
<title>TITLE</title>
<link href = "stylesheet.css" rel="stylesheet">
</head>
<style>
@font-face {
font-family: 'fontbold';
src: url('akzidenz-grotesk-bold-webfont.woff2') format('woff2'),
url('akzidenz-grotesk-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'fontregular';
src: url('akzidenz-grotesk-light-webfont.woff2') format('woff2'),
url('akzidenz-grotesk-light-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1 {
text-align: left;
font-size: 4em;
color: #000000;
margin-bottom: .3em;
margin-left: 1em;
font-family: fontbold;
}
h2 {
text-align: left;
font-size: 3em;
color: #000000;
margin-top: 1em;
margin-left: 1.4em;
font-family: fontregular;
}
</style>
<body>
<h1><br></br>TITLE</h1>
<h2>john doe</h2>
<img src="Meter.png" style="padding-left:95em">
</body>
</html>抱歉，代码可能非常困惑 - 我只是在学习。我很想知道如何解决我的问题？ (沿着文本向上移动条)
最佳答案
使用您自己的布局可能最简单的方法是向图像添加 float 。问题是您需要更改元素的顺序。
<body>
<img src="Meter.png" style="float: right; margin: 0 0 1em 1em;">
<h1><br></br>TITLE</h1>
<h2>john doe</h2>
</body>
这是一个带有片段的类似结构的示例。
<body>
<img src="https://picsum.photos/200/300" style="
float: right;
margin-left: 1rem;
margin-bottom: 1rem;
"><h2>Test title asd pgoasdkg opaskg paskdgpo askdgpo askdgpo kasdpogk asdpogkasdpod gkaposdk gpoasdkg paosdkgp oaskdgpoa ksdpog kaspodgk aspodgk aspod gkaspodgk aspodgk apsodkg paosdkgpoa sdkgpoa sdkgpasod kpaosdgk </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat volutpat nisi. Nam consequat nulla quis nisi fringilla, in iaculis augue accumsan. Maecenas tincidunt libero non bibendum ultrices. In volutpat ut elit non tristique. Fusce pellentesque viverra magna bibendum venenatis. Phasellus a porttitor neque. Pellentesque lectus diam, egestas at lacinia a, tristique quis tortor. Vivamus placerat arcu in hendrerit dapibus. Integer non risus vestibulum, pharetra ligula eu, tempor tellus.</p>
<p>In maximus odio mauris, semper eleifend tellus auctor a. Nunc suscipit consectetur felis, a accumsan velit fermentum vel. In laoreet tellus vitae risus scelerisque ultrices. Quisque pulvinar nulla quis lectus volutpat sodales. Duis sagittis odio dictum ligula blandit sollicitudin. Curabitur fermentum nunc eget eros tincidunt vulputate. Duis ullamcorper elit nec eros sollicitudin, nec ultrices mauris imperdiet. Donec ornare aliquam velit vitae accumsan.</p>
<p>Nullam a hendrerit velit. Vivamus vitae tortor sodales, finibus elit et, pretium massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras porta dolor quis sodales vehicula. Nulla nec consequat quam, ut interdum velit. Pellentesque consectetur, ipsum nec porttitor interdum, metus quam commodo justo, nec ornare lorem libero eget purus. Nunc nisi quam, lobortis vel eros in, elementum mollis erat. Etiam id ante cursus, bibendum metus lobortis, viverra ante.</p>
<p>Morbi ac lectus massa. Nunc elit nunc, lacinia ut mauris ut, euismod molestie magna. Maecenas id facilisis neque. Morbi sodales augue sit amet mattis blandit. Vivamus pharetra risus at nisi convallis, sed ornare nunc pharetra. Fusce molestie purus vitae quam sollicitudin, ac cursus felis vehicula. Vivamus eros dolor, condimentum sed blandit non, consequat vel nulla. Duis et augue mauris. In faucibus quis eros vel commodo. Mauris hendrerit mauris nibh, in aliquam leo laoreet nec. Pellentesque ornare sed urna at aliquam. Etiam consectetur lectus quis hendrerit fermentum.</p>
<p>Proin accumsan nisl sapien, nec venenatis felis aliquam et. Etiam accumsan varius neque, eu placerat nisl suscipit vel. Phasellus lacus dui, lacinia ac consectetur a, efficitur sed lacus. Phasellus rhoncus velit et quam varius, ac malesuada risus malesuada. Sed dignissim consectetur malesuada. Sed quis dictum nisi. Mauris venenatis sapien in accumsan vulputate. Integer interdum sed lacus nec pharetra. Sed tincidunt mi in sagittis hendrerit.</p>
</body>您可以同时使用 float: right; 和 float: left;。通常，如果上面有 float ，文本会调整为图像。
编辑 - 根据您的 margin 评论添加一些信息
是的，你可以对填充做同样的事情。组合是:
margin: 2rem; // 2rem margin on all sides
margin: 2rem 3rem; // 2rem top and bottom, 3rem right and left
margin: 2rem 3rem 4rem; // 2rem top, 3 rem right and left, 4rem bottom
margin: 2rem 3rem 4rem 2.5rem; // 2rem top, 3rem right, 4rem bottom, 2.5rem left
It's something like this:
margin: all;
margin: top-bottom right-left;
margin: top right-left bottom;
margin: top right bottom left;
这是它们通常使用的顺序。同样的事情适用于填充。
关于html - 如何将图像移动到 HTML/CSS 中的文本旁边？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59581791/