Question

我的问题是div，我的几个div是这样的：

  <div id=1>
    <div id=2></div>
    <div id=3></div>
    <div id=4>
      <div id=5></div>
    </div>
  </div>

我需要的是这样设置div： div 2位于左上方，div 3位于右上方，div 4位于右下方，div5位于div 4的顶部中心

问题是我只需要在css中执行此操作，而无需使用类。

您能帮我吗？

Answer 1

我不确定我是否理解您的问题，但是我会这样做：

<html>
<head>
<style>
#p1{

height:200%;
}

#p2 {
  background-color: red;
  width: 49%;
  height:48%;
  position: fixed;
  left:0%;
  top:0%;
}
#p3 {
  background-color: green;
  width: 49%;
  height:48%;
  position: fixed;
  right:0%;
  top:0%;
}
#p4 {
  background-color: blue;
  width: 100%;
  height:48%;
  position: fixed;
  right:0%;
  bottom:0%;
}
#p5 {
  position: absolute;
  right:50%;
  top:50%;
}
</style>
</head>
<body>
<div id=p1>
    <div id=p2>2</div>
    <div id=p3>3</div>
    <div id=p4>4
      <div id=p5>5<br>loren ipsum</div>
    </div>
  </div>


    
</body>
</html>

这是如果要固定div，而如果要div绝对，则可以尝试以下操作：

<html>
<head>
<style>
#p1{
height:200%;
}

#p2 {
  background-color: red;
  width: 49%;
  height:48%;
  position: absolute;
  left:0%;
  top:0%;
}
#p3 {
  background-color: green;
  width: 49%;
  height:48%;
  position: absolute;
  right:0%;
  top:0%;
}
#p4 {
  background-color: blue;
  width: 100%;
  height:48%;
  position: absolute;
  right:0%;
  bottom:0%;
}
#p5 {
  position: absolute;
  right:50%;
  top:50%;
}
</style>
</head>
<body>
<div id=p1>
    <div id=p2>2</div>
    <div id=p3>3</div>
    <div id=p4>4
      <div id=p5>5<br>loren ipsum</div>
    </div>
  </div>


    
</body>
</html>

Answer 2

#d1 {
position:relative;
height:100px;
width:100px;
}
#d2 {
position:absolute;
top:0;
right:0;
width:50px;
height:50px;
background-color:red;
}
#d3 {
position:absolute;
top:0;
left:0;
width:50px;
height:50px;
background-color:blue;
}
#d4 {
position:absolute;
bottom:0;
right:0;
width:50px;
height:50px;
background-color:green;
}
#d5 {
position:absolute;
top:0;
width:25px;
height:25px;
left:0;
right:0;
margin:0 auto;
background-color:yellow;
}

 <div id="d1">
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4">
      <div id="d5"></div>
    </div>
  </div>

希望它的帮助

div位置仅在CSS中而不是类

2 个答案: