Question

我一直试图将两个不同的div一个接一个地放置，但是由于某种原因它们似乎是从同一点开始的。不划分网页的那个区域？

<div class = "part1">
   <div id = "p1left"> something </div>
   <div id = "p1right"> something </div>
</div>

<div class = "part2">
   <div id = "p2left"> something </div>
   <div id = "p2right"> something </div>
</div>

虽然我的css代码是这样的： -

.part1, .part2 {
   position:relative;
}
#p1left, #p2left {
   float:left;
}
#p1right,#p2right {
   float:right;
}

为什么喜欢第一部分的第二部分？我怎么在第二天之前先放？

Answer 1

将CSS更新为

.part1, .part2 {
   position:relative;
   clear:both;
}

clear:both属性删除左右浮动元素，并确保下一个div位于前一个div之下。

Working Fiddle Here

Answer 2

使用此css

.part1:after, .part2:after{
  content: "";
  display: table;
  clear: both;
}

或者在两个div中添加类似.clearfix的新类，并在css下面使用

.clearfix:after{
  content: "";
  display: table;
  clear: both;
}

Answer 3

在css中使用clear可使div单独显示

clear:both;

Answer 4

试试这个

.part1, .part2 {
   float:left;
}
#p1left, #p2left {
   float:left;
   margin:5px;
}
#p1right,#p2right {
   float:left;
   margin:5px;
}

https://jsfiddle.net/xre9j6k2/

Answer 5

请在下面找到更新后的HTML和CSS

<强> HTML

<div class="part1">
    <div id="p1left"> something 1</div>
    <div id="p1right"> something 2</div>
</div>
<div class="clearfix"></div>
<div class="part2">
    <div id="p2left"> something 3</div>
    <div id="p2right"> something 4</div>
</div>

<强> CSS

.part1, .part2 {
   position:relative;
}
#p1left, #p2left {
   float:left;
}
#p1right,#p2right {
   float:right;
}
.clearfix {
  clear: both;
}

Answer 6

不使用position属性，您可以这样做。

<!DOCTYPE html>
<html>
<head>
	<title></title>

	<style type="text/css">
       div.divone{
       	width: 300px;
       	height: 300px;
       	background-color: orange;
       }

        div.divtwo{
       	width: 300px;
       	height: 300px;
       	background-color: yellow;
       }

      div.divone, div.divtwo{
      	float:left;
      }

	</style>
</head>
<body>
  <div class="divone"></div>
  <div class="divtwo"></div>
</body>
</html>

或者如果您想使用position属性，您可以通过仅将位置提供给您的第二个div来实现

<!DOCTYPE html>
<html>
<head>
	<title></title>

	<style type="text/css">
	body{
		margin: 0;
	}
       div.divone{
       	width: 300px;
       	height: 300px;
       	background-color: orange;
       }

        div.divtwo{
       	width: 300px;
       	height: 300px;
       	background-color: yellow;
       	position: absolute;
       	top: 0px;
       	left: 300px;
       }



	</style>
</head>
<body>
  <div class="divone"></div>
  <div class="divtwo"></div>
</body>
</html>

2个不同的div从同一点开始。为什么不是第二个低于另一个？

6 个答案: