html - 将文本与图像对齐？ CSS

Question

我正试图将我的文字放在我照片的左侧，放在一个漂亮的方形容器中。看起来应该很容易，但我一定遗漏了一些东西。在做了一些研究后，我发现可以使用:“vertical-align”、“display-inline”或“float”命令，但我没有成功使用它们中的任何一个。是我的代码有问题吗？还是我应该研究另一个样式命令？

谢谢你的帮助!

这是 jsfiddle:https://jsfiddle.net/d7c99nkw/

代码如下:

/* Cover */
#tom {
	position: relative;
	bottom: 40px;
	left: 45%;
	min-width: 55%;
	max-width: 55%;
	padding: 12px;
	-webkit-box-reflect: below -70px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(78%, transparent), to(white));
}

.cover {
	vertical-align: left;
	padding: 36px;
	float: left;
	

}

<div class="cover">
			<img src="https://lh3.googleusercontent.com/-rVoVQQOFHSk/VUZaG4-rTKI/AAAAAAAAADI/1CvHapoyTOE/w569-h569/derp_boosic.png" id="tom" alt="tomphoto">
				<p id="intro">My name is Thomas. I'm an upbeat, self-motivated people person with an affinity for technology, business, people, and all things creative. In my proffessional career in Sales and IT, I've consistently gone above and beyond sales, and customer service, expecations and have been exceptionally successful. I account my success to my natural ability to build relationships with, and relate to people easily. I also practice a vigorous planning, and goal setting lifestyle which allows me to acheive what I set out to do. I know with my personailty, skills, and drive to be successful. Nothing will stop my from reaching my goals. </p>
			</div>

Answer 1

这是一个可行的解决方案:jsfiddle

在#tom css 规则中，删除 left: 45% 规则并添加 float: right;

#tom {
position: relative;
bottom: 40px;
/*REMOVE left: 45%;*/
min-width: 55%;
max-width: 55%;
padding: 12px;
-webkit-box-reflect: below -70px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(78%, transparent), to(white));
float: right;
}

正如 Paulie_D 所说，不再支持 -webkit-box-reflect。