如何在 HTML 中将文本和图像彼此相邻放置？
Posted
技术标签:
【中文标题】如何在 HTML 中将文本和图像彼此相邻放置？【英文标题】：How to place Text and an Image next to each other in HTML? 【发布时间】：2013-06-17 16:06:09 【问题描述】：我希望文本和图像彼此相邻，但我希望图像位于屏幕的最左侧，并且我希望文本位于屏幕的最右侧。这是我目前拥有的......
<body>
<img src="website_art.png" height= "75" width= "235"/>
<h3><font face="Verdana">The Art of Gaming</font></h3>
</body>
我该怎么做？
谢谢
【问题讨论】：
CSS:float: left; 和 float: right?
自 html5 起，<font> 标记已被删除。请删除它并用等效的 CSS 替换它；）
您可以使用 css 将它们放在 div 中，并使用适当的 float:right 或 left 将它们放在各自的两侧。可以设置 div 宽度以允许您拥有“最左边”和“最右边”的任何方式。
【参考方案1】：
img
float:left;
h3
float:right;
jsFiddle example
请注意，您可能希望在您提供的代码之后的任何元素上使用样式clear:both，这样它就不会直接滑到浮动元素的下方。
【讨论】：
唯一的问题是父 div 会调整大小，如果您使用背景颜色等，这是一个问题 @User “父 div 的大小”是什么意思？【参考方案2】：你想为此使用css float，你可以直接把它放在你的代码中。
<body>
<img src="website_art.png" height= "75" style="float:left;"/>
<h3 style="float:right;">The Art of Gaming</h3>
</body>
但我真的建议学习 CSS 的基础知识并将所有样式拆分为单独的样式表，并使用类。它会在未来帮助你。一个不错的起点是w3schools，或者稍后可能是Mozzila Dev. Network (MDN)。
HTML：
<body>
<img src="website_art.png" class="myImage"/>
<h3 class="heading">The Art of Gaming</h3>
</body>
CSS：
.myImage
float: left;
height: 75px;
width: 235px;
font-family: Veranda;
.heading
float:right;
【讨论】：
【参考方案3】：您可以使用垂直对齐和浮动。
在大多数情况下，您希望垂直对齐：中间，图像。
这是一个测试：http://www.w3schools.com/cs-s-ref/tryit.asp?filename=trycss_vertical-align
垂直对齐：baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
对于middle，定义为：元素放置在父元素的中间。
因此您可能希望将其应用于元素中的所有元素。
【讨论】：
我不认为vertical-align 和 float 一起工作。以上是关于如何在 HTML 中将文本和图像彼此相邻放置？的主要内容，如果未能解决你的问题，请参考以下文章
为啥我不能在第一次运行时在 UISplitViewController 中将 Master 和 Detail 视图彼此相邻放置，但在旋转时它可以工作？