Question

这里的想法是让占位符左侧有一组链接，右侧有一个图像。当您按下链接时，图像和下面的描述会发生变化。

到目前为止，我有这个：

<!DOCTYPE html>
	<html>
	<head>
		 <style type="text/css">
		 	.flex-container {
				display: -webkit-flex;
				display: flex;
				-webkit-flex-direction: row;
				flex-direction: row;
				-webkit-align-items: center;
				align-items: center;
				flex-wrap: wrap;
			}

			.flex-item {
				display:flex;
				align-items: center;
				margin: 3px;
				padding: 10px 0 0 10px;
			}

			.flex-item img{
			    flex-grow:0;
			    flex-shrink:0;
			}

			span {
				margin-top: 0px;
	     		padding-right: 1em;
			}
		</style>
	</head>
	<body>
		<h2>Title</h2>
		<div class="flex-container">
	        <div class="flex-item">
	        	<span>
					<a href="#">link text</a></p>
					<a href="#">link text</a></p>
					<a href="#">link text</a></p>
	        	</span>
	        	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Iceberg_with_hole_near_Sandersons_Hope_2007-07-28_2.jpg/800px-Iceberg_with_hole_near_Sandersons_Hope_2007-07-28_2.jpg">
	        </div>
	    </div>
	    <span>Description description description description description description description description description description description description description description description description description description </span>
	</body>
	</html>

如何强制链接（span元素）在父级的顶部（与图像的开头相同的高度）对齐，而不是在中间居中？

Answer 1

取消align-items值

.flex-item {
  display: flex;
   /*align-items: center; */ /* remove this */
  margin: 3px;
  padding: 10px 0 0 10px;
}

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
}
.flex-item {
  display: flex;
  /*align-items: center; */
  /* remove this */
  margin: 3px;
  padding: 10px 0 0 10px;
}
.flex-item img {
  flex-grow: 0;
  flex-shrink: 0;
}
span {
  margin-top: 0px;
  padding-right: 1em;
}

 <h2>Title</h2>
<div class="flex-container">
  <div class="flex-item">
    <span>
					<a href="#">link text</a>
					<a href="#">link text</a>
					<a href="#">link text</a>
	        	</span>
<img src="http://www.fillmurray.com/g/640/300">>
  </div>
</div>
<p>Description description description description description description description description description description description description description description description description description description</p>

强制Flexbox上的项目保持在顶部

1 个答案: