Question

好吧所以我得到了一个漂浮在左边的div和一个漂浮在右边的div，现在由于某种原因我不能让他们走到他们应该的那一边。他们现在彼此重叠了

* {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}

html, body {
  width: 100%;
  height: 100%;
}

#main  {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#main img {
  width: 100%;
  height: 100%;
}

#page_left, #page_right {
  width: 50%;
  height: 100%;
  background-color: red;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1000;
}

<div id="main">
  <img src="img/background.jpg"/>
  <div id="page_left"></div>
  <div id="page_right"></div>
</div>

我也尝试使用带有显示内联块的方法，但它没有那么好用

Answer 1

使用额外的css

尝试此操作

CSS

#page_left, #page_right {
    width: 50%;
    height: 100%;
    background-color: red;
    position: absolute;
    top: 0px;
    z-index: 1000;
}

#page_left {
    left: 0;
}

#page_right {
    right: 0;
}

Answer 2

#page_left, #page_right {
    width: 50%;
    height: 100%;
    background-color: red;
    position: absolute;
    top: 0px;
    z-index: 1000;
}

删除left: 0px

OR

删除position: absolute

#page_left, #page_right {
    width: 50%;
    height: 100%;
    background-color: red;
    z-index: 1000;
}

Answer 3

溢出发生的原因是你给了两个div的左：0px 和位置：绝对，我解决了这个问题并添加了下面的代码片段。

* {
	margin: 0;
	padding: 0;
	font-family: 'Lato', sans-serif;
}

html, body {
	width: 100%;
	height: 100%;
}

#main  {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

#main img {
	width: 100%;
	height: 100%;
}

#page_left, #page_right {
	width: 50%;
	height: 100%;
	background-color: red;
	position: absolute;
	
	top: 0px;
	z-index: 1000;
}
#page_left{
  left: 0px;
}
#page_right{
  background-color:green;
  float:right;
  position: absolute;
 right: 0px;
  
  }

<!DOCTYPE HTML>



<html>

	<head>
	</head>
	
	
	<body>
		<div id="main">
			<img src="img/background.jpg"/>
			<div id="page_left">
				
			</div>
			
			<div id="page_right">
			
			</div>
		</div>
	</body>

</html>

图像上的两个浮动div

3 个答案: