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规则中，删除左：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：

$ gcloud --version
Google Cloud SDK 99.0.0

bq 2.0.18
bq-nix 2.0.18
core 2016.02.26
core-nix 2016.02.05
gcloud 
gsutil 4.17
gsutil-nix 4.15

$ gcloud components list

Your current Cloud SDK version is: 99.0.0
The latest available version is: 99.0.0

┌─────────────────────────────────────────────────────────────────────────────────┐
│                                    Components                                   │
├───────────────┬─────────────────────────────────┬───────────────────┬───────────┤
│     Status    │               Name              │         ID        │    Size   │
├───────────────┼─────────────────────────────────┼───────────────────┼───────────┤
│ Not Installed │ Cloud Datastore Emulator        │ gcd-emulator      │  38.1 MiB │
│ Not Installed │ Cloud Pub/Sub Emulator          │ pubsub-emulator   │  10.1 MiB │
│ Not Installed │ gcloud Alpha Commands           │ alpha             │   < 1 MiB │
│ Not Installed │ gcloud Beta Commands            │ beta              │   < 1 MiB │
│ Not Installed │ gcloud app Java Extensions      │ app-engine-java   │ 101.4 MiB │
│ Not Installed │ gcloud app Python Extensions    │ app-engine-python │   7.2 MiB │
│ Not Installed │ kubectl                         │ kubectl           │   5.2 MiB │
│ Installed     │ BigQuery Command Line Tool      │ bq                │   < 1 MiB │
│ Installed     │ Cloud SDK Core Libraries        │ core              │   3.9 MiB │
│ Installed     │ Cloud Storage Command Line Tool │ gsutil            │   2.6 MiB │
│ Installed     │ Default set of gcloud commands  │ gcloud            │           │
└───────────────┴─────────────────────────────────┴───────────────────┴───────────┘

将文本与图像对齐？ CSS

3 个答案: