将文字与图片对齐？ 的CSS

Question

我正在尝试将文字放在照片的左侧，放在一个方形的容器中。 似乎应该很容易，但是我必须缺少一些东西。 经过一些研究，我发现使用了“垂直对齐”，“显示行内”或“浮动”命令，但是我都没有成功。 我的代码有问题吗？ 还是我应该研究另一个样式命令？

感谢您的帮助！

继承人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。

Answer 2

嗨，在这里，您的代码有一些问题，您需要给彼此想要的两个对象一个display: inline-block a和两个都不错的宽度。 接下来，您必须交换html元素，在jsfiddle上查看我的更新。

https://jsfiddle.net/d7c99nkw/4/

Answer 3

我为您更正了CSS：

/* Cover */
#tom{
    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 img{
           float: right;
}