Question

我设法使用float对齐它们，但有些不是彼此直接位于上方。我尝试了很多方法，但是它似乎不起作用，但是某些元素的宽度不同，有些对齐的元素对齐得更远。这是CSS代码：https://codepen.io/Filizof/pen/vvGqJb?editors=1100

float: right;
width: 900px;

仅显示这两个是因为它们似乎是固定的，但也是问题。

Answer 1

使用此

.conversions {
  width: 800px;
  margin:0 auto;
}

Answer 2

您可以使用网格使其变得容易。您唯一需要做的就是创建新的div，将其放入您已经创建的内容中。

希望对您有帮助。

body{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "one two"
                         "three three";
}

.one{
    grid-area: one;
    background-color: yellow;
}

.two{
    grid-area: two;
    background-color:green;
}

.three{
    grid-area: three;
    background-color: red;
}

<body>
    <div class="one">
        one
    </div>
    
    <div class="two">
        two
    </div>
    
    <div class="three">
        Three
    </div>
</body>
</html>

如何将不同大小的div彼此相邻并直接对齐？

2 个答案: