將文字與圖片對齊？ 的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;
}