Question

寻找这样的设计

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		html, body {
			height: 100%;
			margin: 0;
		}

		.wrapper {
			min-height: 250px;
			background-color: #333333;
		}

		.mainContainer {
			max-width: 90%;
			margin: 0 auto;
			height: 100%;
			position: relative;
		}
		.container{
			max-width: 90%;
			padding-top: 10px;
			display: flex;
			color: white;
		}
		.features{
			width: 100%;
			position: absolute;
			background: #fff;
			-webkit-box-shadow: 0 6px 26px 0 rgba(0,0,0,.09);
			box-shadow: 0 6px 26px 0 rgba(0,0,0,.09);
			padding: 40px 0px 20px;
			border-radius: 10px;
			left: 0;
			bottom: -198px;
			z-index: 2;
			display: flex;
		}

	</style>
</head>
<body>
	<div class="wrapper">
		<div class="mainContainer">
			<div class="container">
				<h2>Logo</h2>
			</div>
			<div class="features">

<!-- Adding this makes this box go hay wire 

How to make Sure this styles caters to a particular screen range and  The content should show in the white box and flow down we can also e and not come up. what am i messing up here and can we use flex

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id urna sed mauris sagittis cursus. Praesent non turpis vel nisl hendrerit vestibulum. Sed enim erat, tincidunt sed ultrices a, auctor eu risus. Duis felis purus, sollicitudin in feugiat ac, vulputate ac leo. Etiam tincidunt ultrices metus quis mattis. Nullam fermentum, nunc sed ullamcorper vestibulum, justo ex pretium ex, sed rutrum est lacus nec odio. Etiam vehicula feugiat est, ut porta lectus rhoncus sagittis. Nullam ac sagittis mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel fringilla lorem. Duis in congue sem.

In erat sem, fringilla non dapibus eu, varius at enim. Nulla sagittis pharetra est eu lacinia. Suspendisse condimentum ligula enim, non consectetur arcu consequat a. Nulla aliquam egestas ex. Duis blandit eleifend rutrum. Integer at nisl augue. Suspendisse potenti. Praesent nisi risus, vehicula a ante at, mattis feugiat elit.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur at pulvinar tellus. Maecenas dictum eu lacus vestibulum fermentum. Cras quam lorem, gravida at pharetra sed, varius eget diam. Fusce ultricies tristique feugiat. Integer in ligula tristique, condimentum magna ac, tincidunt neque. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed cursus volutpat volutpat. Ut congue ex non magna luctus, quis bibendum ante consequat. Phasellus efficitur feugiat orci eu varius. Morbi suscipit congue mi quis porttitor. Suspendisse in erat nisi. Etiam sed neque finibus, porta eros a, vulputate turpis.

Aliquam sem sapien, suscipit ac efficitur vitae, vehicula aliquet erat. Nam quam tortor, pharetra a ex ut, varius ultricies risus. Quisque ligula tellus, consectetur in auctor eget, sagittis eu augue. Mauris aliquet nisi aliquet, vehicula enim vitae, rhoncus enim. Nulla in iaculis nisi. Sed consectetur auctor lacus, id blandit dolor luctus eu. Nulla facilisi. Pellentesque tempus mattis molestie. Donec nec iaculis leo. Sed in odio ullamcorper, rhoncus nulla at, blandit felis. Nam ac aliquet leo. Suspendisse convallis purus sed magna aliquet maximus. Proin ut ullamcorper augue, vitae efficitur elit. Sed et enim tellus.

Ut dictum id quam ut posuere. Donec vitae nunc quis odio volutpat euismod et eu nulla. In consectetur nulla lectus, ac bibendum sem blandit eget. Maecenas finibus ornare ligula eu porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vel tristique orci, euismod maximus lorem. Nullam sem metus, mollis vehicula est eget, molestie pretium diam.
-->


			</div>
		</div>

	</div>

</body>
</html>

如何确保此样式适合特定的屏幕范围，并且内容应显示在白框中，并且可以顺流而下，但不会出现。我在这里搞砸了，我们可以使用flex

Answer 1

父元素应该具有位置：相对，文本顶部为：200px，而不是底部，至少在这种情况下，flex与位置无关。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		html, body {
			height: 100%;
			margin: 0;
		}

		.wrapper {
            position: relative;
			min-height: 250px;
			background-color: #333333;
		}

		.mainContainer {
			max-width: 90%;
			margin: 0 auto;
			height: 100%;
			position: relative;
		}
		.container{
			max-width: 90%;
			padding-top: 10px;
			display: flex;
			color: white;
		}
		.features{
			width: 100%;
			position: absolute;
			background: #fff;
			-webkit-box-shadow: 0 6px 26px 0 rgba(0,0,0,.09);
			box-shadow: 0 6px 26px 0 rgba(0,0,0,.09);
			border-radius: 10px;
			left: 0;
			top: 200px;
			z-index: 2;
      margin-bottom: 20px;
			display: flex;
		}
    .feature-body {
      padding: 40px 20px;
    }

	</style>
</head>
<body>
	<div class="wrapper">
		<div class="mainContainer">
			<div class="container">
				<h2>Logo</h2>
			</div>
			<div class="features">
<div class="feature-body">
Adding this makes this box go hay wire 

How to make Sure this styles caters to a particular screen range and  The content should show in the white box and flow down we can also e and not come up. what am i messing up here and can we use flex

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id urna sed mauris sagittis cursus. Praesent non turpis vel nisl hendrerit vestibulum. Sed enim erat, tincidunt sed ultrices a, auctor eu risus. Duis felis purus, sollicitudin in feugiat ac, vulputate ac leo. Etiam tincidunt ultrices metus quis mattis. Nullam fermentum, nunc sed ullamcorper vestibulum, justo ex pretium ex, sed rutrum est lacus nec odio. Etiam vehicula feugiat est, ut porta lectus rhoncus sagittis. Nullam ac sagittis mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel fringilla lorem. Duis in congue sem.

In erat sem, fringilla non dapibus eu, varius at enim. Nulla sagittis pharetra est eu lacinia. Suspendisse condimentum ligula enim, non consectetur arcu consequat a. Nulla aliquam egestas ex. Duis blandit eleifend rutrum. Integer at nisl augue. Suspendisse potenti. Praesent nisi risus, vehicula a ante at, mattis feugiat elit.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur at pulvinar tellus. Maecenas dictum eu lacus vestibulum fermentum. Cras quam lorem, gravida at pharetra sed, varius eget diam. Fusce ultricies tristique feugiat. Integer in ligula tristique, condimentum magna ac, tincidunt neque. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed cursus volutpat volutpat. Ut congue ex non magna luctus, quis bibendum ante consequat. Phasellus efficitur feugiat orci eu varius. Morbi suscipit congue mi quis porttitor. Suspendisse in erat nisi. Etiam sed neque finibus, porta eros a, vulputate turpis.

Aliquam sem sapien, suscipit ac efficitur vitae, vehicula aliquet erat. Nam quam tortor, pharetra a ex ut, varius ultricies risus. Quisque ligula tellus, consectetur in auctor eget, sagittis eu augue. Mauris aliquet nisi aliquet, vehicula enim vitae, rhoncus enim. Nulla in iaculis nisi. Sed consectetur auctor lacus, id blandit dolor luctus eu. Nulla facilisi. Pellentesque tempus mattis molestie. Donec nec iaculis leo. Sed in odio ullamcorper, rhoncus nulla at, blandit felis. Nam ac aliquet leo. Suspendisse convallis purus sed magna aliquet maximus. Proin ut ullamcorper augue, vitae efficitur elit. Sed et enim tellus.

Ut dictum id quam ut posuere. Donec vitae nunc quis odio volutpat euismod et eu nulla. In consectetur nulla lectus, ac bibendum sem blandit eget. Maecenas finibus ornare ligula eu porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vel tristique orci, euismod maximus lorem. Nullam sem metus, mollis vehicula est eget, molestie pretium diam.


</div>
			</div>
		</div>

	</div>

</body>
</html>

P.S。如果您想了解flex的用途，我推荐这款游戏https://flexboxfroggy.com

如何确保此页面的样式正确？

1 个答案: