使用圖像對齊文本？ CSS

我試圖把我的文字放在我的照片的左邊，放在一個漂亮的方形容器中。它似乎應該很容易，但我必須錯過一些東西。在做了一些研究之後，我發現使用：「vertical-align」，「display-inline」或「float」命令，但我還沒有取得任何成功。這是我的代碼問題嗎？還是有另一種我應該關注的造型命令？使用圖像對齊文本？ CSS

謝謝你的幫助！

繼承人的的jsfiddle：https://jsfiddle.net/d7c99nkw/

繼承人的代碼：

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

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

 
}

<div class="cover"> 
 
\t \t \t <img src="https://lh3.googleusercontent.com/-rVoVQQOFHSk/VUZaG4-rTKI/AAAAAAAAADI/1CvHapoyTOE/w569-h569/derp_boosic.png" id="tom" alt="tomphoto"> 
 
\t \t \t \t <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> 
 
\t \t \t </div>

來源

2016-03-05 Thomas T.

'-webkit-箱reflect'不再支持......小心使用。 –

這裏是一個有效的解決方案：jsfiddle

在#tom CSS規則，去除左： 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-箱反映不再支持。

來源

2016-03-05 18:51:01 silviagreen

太棒了，非常感謝你，真的幫助我！感謝-webkit提示！ –

嗨在那裏你的代碼有兩個錯誤的地方，你需要給對方一個display: inline-block a和寬度都不錯的對象。接下來，您必須交換周圍的html元素，查看我在jsfiddle上的更新。

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

來源

2016-03-05 18:52:28 jasper

我糾正了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; 
}

來源

2016-03-05 18:57:04

使用圖像對齊文本？ CSS

回答

相關問題