英文:
How can I move an image to be alongside text in HTML / CSS?
问题
以下是您提供的代码的翻译部分：
我在尝试一些东西。我需要右边的仪表（彩色条）和左边的文本。问题是仪表不能超过文本。请查看下面的图像以了解我的意思：
[![使用以下代码的当前页面][1]][1]
<!-- 开始代码片段：js 隐藏：false 控制台：true babel：false -->
<!-- 语言：lang-html -->
<html>
<head>
<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>标题</h1>
<h2>约翰·多伊</h2>
<img src="Meter.png" style="padding-left:95em">
</body>
</html>
<!-- 结束代码片段 -->
抱歉，代码可能非常混乱 - 我只是在学习。我想知道如何解决我的问题？（将条移到文本上方）
[1]: https://i.stack.imgur.com/81K5O.png
这是您提供的内容的翻译。如果您需要任何进一步的帮助，请随时告诉我。
英文:
I'm trying something out. I need the Meter (coloured bar) on the right and the text on the left. The problem is that the meter does not go above the text. See the image below for what I mean:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Sorry, the code's probably very messy - I'm just learning. I would love to know how my problem can be solved? (Moving the bar upwards, along the text)
答案1
得分: 0
你可以使用 flex 来实现这一点。为了使图像与文本右对齐，它们都应该在同一个容器中。使用 flex 的 justify-content 属性将项目放在起始和结束位置。
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;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
<div class="container">
<div>
<h1><br></br>TITLE</h1>
<h2>john doe</h2>
</div>
<div>
<img src="https://images.unsplash.com/photo-1444041103143-1d0586b9c0b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="width: 200px">
</div>
</div>
英文:
You can achieve this by using flex. For the image to align at the right side of text, both of them should be in a same container. Use justify-content property of flex to make the items at start and end positions
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
<!-- language: lang-html -->
<div class="container">
<div>
<h1><br></br>TITLE</h1>
<h2>john doe</h2>
</div>
<div>
<img src="https://images.unsplash.com/photo-1444041103143-1d0586b9c0b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="width: 200px">
</div>
</div>
<!-- end snippet -->
答案2
得分: 0
图片与文本无法对齐，因为<h1>和<h2>是块级元素。您需要将它们设置为display: inline-block;以使图片与文本对齐。
英文:
The image won't align with text because <h1> and <h2> are block elements. You have to make them display: inline-block; to align image with the text.
答案3
得分: 0
使用您自己的布局，可能最简单的方法是将浮动添加到图像。问题在于您需要更改元素的顺序。
<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>测试标题 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; 进行调整。通常，如果图像上有浮动，文本会自动调整到图像上。
编辑 - 根据您的边距注释添加一些信息
是的，您可以使用填充来实现相同的效果。组合有：
margin: 2rem; // 顶部，右侧，底部，左侧都是2rem的边距
margin: 2rem 3rem; // 顶部和底部2rem，左侧和右侧3rem的边距
margin: 2rem 3rem 4rem; // 顶部2rem，左侧和右侧3rem，底部4rem的边距
margin: 2rem 3rem 4rem 2.5rem; // 顶部2rem，右侧3rem，底部4rem，左侧2.5rem的边距
它就像这样：
margin: 所有边;
margin: 顶部-底部 右侧-左侧;
margin: 顶部 右侧-左侧 底部;
margin: 顶部 右侧 底部 左侧;
这通常是它们的使用顺序。对填充也适用相同的原则。
英文:
Using your own layout probably the easiest way to do this could be to add a float to the image. The thing is that you'd need to change the order of elements.
<body>
<img src="Meter.png" style="float: right; margin: 0 0 1em 1em;">
<h1><br></br>TITLE</h1>
<h2>john doe</h2>
</body>
Here's an example of a similar structure with a snippet.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
You could play with both float: right; and float: left;. Normally the text adjusts to an image if there's a float on it.
EDIT - Add some info based on your margin comment
Yes, you can do the same with padding. The combinations are:
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;
That's the order they are normally used in. Same thing works for padding.
答案4
得分: 0
尝试这个，应该适用于您。如果似乎不起作用，请将左填充从95em减少到您的屏幕大小。
<span>
<h2 style="display:inline;">john doe</h2>
<img src="Meter.png" style="padding-left:95em"/>
</span>
输出将如下所示：
英文:
Try this it should work for you. If it does not seems to work reduce the padding-left from 95em to your screen size.
<span>
<h2 style="display:inline;">john doe</h2>
<img src="Meter.png" style="padding-left:95em"/>
</span>
output will look like
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论