Question

我正在练习流畅的图像和divs布局。在下面的代码中，我设法获得了成功的流体图像和流体div。但是，只要浏览器窗口重新调整为最小尺寸，左边的一个div .leftcolumn（蓝色的一个）似乎垂直向下流入底部红色div。请参阅附带的屏幕截图以了解情况。

我知道这个问题可以通过媒体查询来解决。但在这种情况下，我希望了解为什么会发生这种情况，以及任何替代解决方案。

Screenshot

html,body {
	margin: 0px;
	height: 100%;
	/* [disabled]width: 100%; */
	left: 0px;
	top: 0px;
	background-color: rgba(255,255,255,1);
	font-size: medium;
}

.wrapper {
	text-align: center;
	margin-top: 0;
	margin-left: auto;
	height: auto;
	max-width: 960px;
	background-color: rgba(0,0,0,1);
	margin-right: auto;
	position: relative;
}


.bigcontainer {
	display: block;
	/* [disabled]border: 1px solid black; */
	margin-top: 0px;
	margin-right: 10%;
	margin-left: 10%;
	background-color: rgba(204,204,204,1);
	max-width: 100%;
	font-size: xx-large;
	color: rgba(255,255,255,1);
	top: 0px;
	height: auto;
	/* [disabled]margin-bottom: -3px; */
	position: relative;
}

img{
	max-width: 100%;
	max-height: 100%;
	/* [disabled]margin-bottom: -9px; */
	display: block;	
}

.leftcolumn {
	width: 10%;
	height: 96%;
    background-color: rgba(0,0,255,1);
	position: absolute;
	margin-top: 0px;
	margin-left: 0px;
	left: 0px;
	top: 0px;
	margin-bottom: 10%;
	overflow: hidden;
}

.rightcolumn {
	width: 10%;
	background-color: rgba(204,255,0,1);
	height: 100%;
	position: absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px;
	right: 0px;
}

.text {
	height: auto;
    width: auto;
    color: rgba(255,255,255,1);
    position: absolute;
    margin-left: auto;
    font-size: 18px;
    margin-right: auto;
    top: 0px;
}

.text2 {
	height: 10%;
	width: auto;
	color: rgba(255,255,255,1);
	top: 0px;
	margin-left: 0%;
	font-size: 18px;
	/* [disabled]float: left; */
	margin-right: 10%;
}

.text3 {
	height: auto;
	width: auto;
	color: rgba(255,255,255,1);
	top: 0px;
	margin-left: 5%;
	font-size: 18px;
	background-color: rgba(0,0,255,1);
	float: left;
}

<div class="wrapper">
  <div class="leftcolumn"></div>
  <div class="rightcolumn"></div>
  <div class="bigcontainer">
    <img src="http://i1062.photobucket.com/albums/t482/gautam_official/royal-enfield-motorcycle-2x_zpswmyloqvc.jpg" alt="enfield">
    <div class="text">This is text. Its in center</div>
  </div>
  <div class="text2">This one is below text</div>
</div>

Answer 1

TL; DR：将position:relative设为.text2。

这种情况正在发生，因为您的元素.text2未设置为position:relative。默认情况下，他是position:static，这意味着他没有定位＆＃34; （除静电外的任何东西都被认为是定位的当一个元素是静态的时，它没有z-index并且保持在另一个元素之下＃34;定位＆＃34;元素。看看CSS Tricks关于将位置设置为相对的内容：

＆＃34; ...一个是它引入了在该元素上使用z-index的能力，这对于静态定位元素并不起作用。即使您没有设置z-index值，此元素现在也会显示在任何其他静态定位元素的顶部。你可以通过在静态定位元素上设置更高的z-index值来对抗它。＆＃34;

在你的情况下，另一个＆＃34;定位＆＃34;元素超越了静态.text2。

＆＃34;具有非静态定位的元素将始终显示在具有默认静态定位的元素之上。＆＃34;

HERE了解有关定位的更多信息，HERE了解z-index。

抱歉我的英语。：）

根据这个答案的评论，我将尝试详细说明另一种解决方案。

问题是.leftcolumn有height: 96%。 96％是与没有设置高度的包含块（.wrapper）相关的百分比。

另一种解决方案是将.leftcolumn放在.bigcontainer内。 .bigcontainer可以容纳.leftcolumn和图片。 .leftcolumn的高度将设置为100％，现在将.bigcontainer测量为包含框（将具有图像高度）。请参阅代码段：

＆＃13;

.wrapper {
	margin: auto;
	max-width: 960px;
	background-color: rgba(0,0,0,1);
	position: relative;
}


.bigcontainer {
	display: block;
	background-color: rgba(204,204,204,1);
	color: rgba(255,255,255,1);
	position: relative;
	max-width: 90%;
	height: 90%;
}

img{
	max-width: 90%;
	max-height:100%;
	margin-left:10%;
	display: block;
}

.leftcolumn {
	width: 10%;
	height: 100%;
	background-color: rgba(0,0,255,1);
	position: absolute;
	left: 0px;
}

.rightcolumn {
	width: 10%;
	background-color: rgba(204,255,0,1);
	height: 100%;
	position: absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px;
	right: 0px;
}

.text {
	height: auto;
	width: auto;
	color: rgba(255,255,255,1);
	position: absolute;
	top: 0px;
	margin-left: 12%;
	font-size: 18px;
}

.text2 {
	height: 10%;
	width: auto;
	color: rgba(255,255,255,1);
	top: 0px;
	margin-left: 0%;
	font-size: 18px;
	margin-right: 10%;
}

.text3 {
	height: auto;
	width: auto;
	color: rgba(255,255,255,1);
	top: 0px;
	margin-left: 5%;
	font-size: 18px;
	background-color: rgba(0,0,255,1);
	float: left;
}

＆＃13;

<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<title>Teste</title>
		<link rel="stylesheet" href="stylesheet.css" type="text/css">
	</head>
    <body>
	
		<div class="wrapper">
			
			<div class="rightcolumn"></div>
			<div class="bigcontainer">
				<div class="leftcolumn"></div>
				<img src="http://i1062.photobucket.com/albums/t482/gautam_official/royal-enfield-motorcycle-2x_zpswmyloqvc.jpg" alt="enfield">

				<div class="text">
					This is text. Its in center
				</div>
			</div>
			<div class="text2">
			This one is below text
		</div>

		</div>
			
    </body>
</html>

＆＃13;

希望这会有所帮助。：）

Answer 2

这是所需的输出吗？

.wrapper{
  max-width: 960px;
  margin: 0 auto;
}

.wrapper, .leftupper{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  text-align: center;
}

.left{
  flex-basis: 90%;
  color: white;
}

.right{
  flex-basis: 10%;
  flex-shrink: 0;
  background-color: rgba(204,255,0,1);
}

.left .leftupperleft{
  flex-basis: 10%;
  flex-shrink: 0;
  background-color: rgba(0,0,255,1);
}

.left .leftupperright{
  position: relative;
  background-color: rgba(204,204,204,1);
}

.left .leftupperright .text{
  position: absolute;
}

.left .leftupperright img{
  width: 100%;
}

.left .leftlower{
  background-color: rgba(255,0,0,1);
}

<div class="wrapper">
    <div class="left">
        <div class="leftupper">
            <div class="leftupperleft">
            </div>
            <div class="leftupperright">
                <div class="text">This is text. Its in center</div>
                <img src="http://i1062.photobucket.com/albums/t482/gautam_official/royal-enfield-motorcycle-2x_zpswmyloqvc.jpg" alt="enfield">
            </div>
        </div>
        <div class="leftlower">This one is below text</div>
    </div>
    <div class="right"></div>
</div>

流体图像，div重新定位

2 个答案: