时间戳

首页 > 解决方案 > 如何为css水平对齐两个容器？

css - 如何为css水平对齐两个容器？

问题描述

我是 CSS 的初学者。我尝试使用显示块，但它不起作用。这不仅仅是一个中心，因为也显示了许多容器。我尝试使用margin-bottom & right，但它也不起作用，变得像一个交叉的，几乎是平行的。

我正在尝试对齐第四个和五个 div。黑色和红色的一个。如果您尝试查看我的代码，我将不胜感激，在此先感谢您。

div#first {
  background-color: #FF0000;
  height: 180px;
  width: 180px;
  float: left;
  position: relative;
}

div#third {
  background-color: blue;
  height: 180px;
  width: 190px;
  float: left;
  margin-left: 190px;
  position: relative;
}

div#fourth {
  display: block;
  background-color: black;
  height: 100px;
  width: 100px;
  margin-left: 5px;
  float: left;
}

div#five {
  background-color: red;
  height: 100px;
  width: 100px;
  float: left;
}

div#six {
  background-color: navy;
  height: 100px;
  width: 100px;
  float: left;
  margin-left: 400px;
}

div#hello1 {
  background-color: navy;
  width: 80px;
  height: 100px;
  position: absolute;
  bottom: 90px;
}

div#hello2 {
  background-color: orange;
  width: 200px;
  height: 100px;
  bottom: 90px;
  margin-left: 85px;
  position: absolute;
}

div#hello3 {
  background-color: red;
  width: 130px;
  height: 100px;
  position: absolute;
  bottom: 90px;
  margin-left: 290px;
}

div#hello4 {
  background-color: navy;
  width: 150px;
  height: 100px;
  position: absolute;
  bottom: 90px;
  margin-left: 425px;
}
<div class="content" id="first"> </div>
<div class="content" id="third"> </div>
<div class="content" id="fourth"> </div>
<div class="content" id="five"> </div>
<div class="content" id="six"> </div>
<div class="content" id="hello1"> </div>
<div class="content" id="hello2"> </div>
<div class="content" id="hello3"> </div>
<div class="content" id="hello4"> </div>

在此处输入图像描述

标签： css

解决方案

我不认为我完全明白你的意思，但看看这个片段并告诉我这是否是你正在寻找的（打开

div#first{
    background-color: #FF0000;
    height: 180px;
    width: 180px;
    float: left;
}

 div#third{
     background-color: blue;
     height: 180px;
    width: 190px;
    float: left;
 }

 div#fourth{
     background-color: black;
     height: 100px;
    width: 100px;
   float: left;

 }

 div#five{
     background-color:  red;
     height: 100px;
     width: 100px;
     float: left;

 }

 div#six{
     background-color: navy;
     height: 100px;
    width: 100px;
    float: left;
 }

 div#hello1{
      background-color: navy;
     width: 80px;
     height: 100px;
     position: absolute;
     bottom:90px;
 
 }

 div#hello2{
      background-color: orange;
     width: 200px;
     height: 100px;
     bottom:90px;
     margin-left: 85px;
     position: absolute;
 
 }

 div#hello3{
     background-color: red;
     width: 130px;
     height: 100px;
     position: absolute;
     bottom:90px;
     margin-left: 290px;
  
 }

 div#hello4{
     background-color: navy;
     width: 150px;
     height: 100px;
     position: absolute;
     bottom:90px;
     margin-left: 425px;
 
 }


#aligned {
  display : flex;
flex-direction: column;
}
<body>
<div class = "content"   id = "first">  </div> 
<div class = "content"   id = "third">  </div> 
  <div id="aligned">
<div class = "content"   id = "fourth">  </div> 
<div class = "content"   id = "five">  </div>
    </div>
<div class = "content"   id = "six">  </div> 
</body>

推荐阅读