垂直拉伸div以适合内容

时间:2017-03-08 20:52:38

标签: html css

如何使.welcome-content-wrap类延伸以适应其内容并仍然保持我给它的透明风格?

据我所知,你通常不会像我一样添加背景图片,但我有理由这样做,就像我一样

.welcome-section{
	position: relative;
}

.welcome-background{
	max-width: 100%;
	display: block;
	height: auto;
}

.welcome-content-wrap{
	position: absolute;
	top:10%;
	left: 0;
	right: 0;
	bottom: 10%;
	margin: 0 auto;
	max-width: 800px;
	background: rgb(0, 0, 0); 
	background: rgba(0, 0, 0, 0.7);
	text-align: center;
}

.welcome-content-wrap img{
	display: block;
	width: 50%;
	margin: 50px auto;
}

.welcome-content-wrap p{
	color: #fff;
	margin: 25px;
}

.text-style{
	font-family: outstanding;
	font-size: 0.75em;
}
<div class="welcome-section">
	<img class="welcome-background" src="images/menuBackground.jpg">
	<div class="welcome-content-wrap">
		<img src="images/welcomeTransparent.png">
	
		<p>
			<span class="text-style">WELCOME</span> to Popsie's of Bramhope a modern, local<br> 
			Yorkshire fish and chip shop. At Popsie's all our food is hand<br> prepared by Popsie's Dad in the shop's kitchen every day.
		</p>
		<p>All our fish is sourced from sustainable sources.</p>
		<p>
			We cook fish to order so that it isn't left to dry out under lights,<br> 
			like in too many chip shops.
		</p>
		<p>Our potatoes are from local Yorkshire & Lincolnshire farms and<br> we pride ourselves on using the best and freshest ingredients.</p>
	
		<img id="image-m" src="images/shutterstock_164403170.jpg">
		<img id="image-l" src="images/National-federation-of-fish-logo.png">
		<img id="image-r" src="images/CSSMSClogo.png">
	</div>
</div>

3 个答案:

答案 0 :(得分:2)

我不完全确定您对absolute定位的意图,但我认为您意味着horizontally - 因为已经涵盖了 - 但{ {1}}而不是。

如果我是对的,这可能就是你要找的东西? https://jsfiddle.net/tpfqk0v7/

我更改的是verticallytop:10%,而是切换为bottom: 10%

旁注:我刚刚添加了背景,以便更容易看到实际的变化。一切都是透明的,没有背景图像可见,这有点难;)

如果你真的是指x轴/水平包装,那么当然只是忽略我的答案。

答案 1 :(得分:1)

尝试从css文件中删除max-width: 800px类括号中的.welcome-content-wrap

答案 2 :(得分:1)

宽度:100%;

但是你也有最大宽度,你可能想检查是否有阻止它。