如何使3个项目与第一个左对齐，第二个到右上角和第三个右下角？

Question

我有以下HTML。 <div><item1><item2><item3><div>。这些项目是div s。我希望这些项目显示在两列中。 item2本身位于左列。在右列中，item1与顶部对齐，item3与底部对齐。 这是布局

我如何使用flexbox或float？

Answer 1

你可以用flexbox和float来做，但我可能会使用css-grid。

这样你甚至可以保留当前的订单。

＆＃13;

＆＃13;

if option == "GET":

＆＃13;

.wrapper {
  display: grid;
  grid-template-rows: 1fr 1fr;  /*you can use px, %, auto etc. here*/
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "left-item right-top" "left-item right-bottom";
  
  width: 500px;
  height: 200px;
}

.item2 {
  grid-area: left-item;
  
  background-color: blue;
}

.item1 {
  grid-area: right-top;
  
  background-color: red;
}

.item3 {
  grid-area: right-bottom;
  
  background-color: green;
}

＆＃13;

＆＃13;

＆＃13;

但是我会考虑制作一个没有css-grid的（移动）版本作为后备，但是现在你的布局是正确的，我认为它适用于桌面/平板电脑吗？

Answer 2

这应该产生预期的效果。

您需要使用float: right;将div置于右侧。 和float: left;将div放在左边。

#main {
  width: 50%;
  background-color: blue;
  height: 200px;
  float: left;
}

#first {
  width: 50%;
  background-color: red;
  height: 100px;
  float: right;
}

#second {
  width: 50%;
  background-color: green;
  height: 100px;
  float: right;
}

<div id="main">
  <h1>
    item1
  </h1>
</div>

<div id="first">
  <h1>
    item2
  </h1>
</div>

<div id="second">
  <h1>
    item3
  </h1>
</div>

Answer 3

有很多方法可以做到这一点。您可以创建一个包含两列的表。在第二列中，您可以创建两行。最后把你的项目放在桌子上。

我在这里做了：

 table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th, td {
        padding: 5px;
        text-align: left;
    }

<table style="width:100%">
      <tr>
        <th>item1</th>
        <th>
        <table>
            <tr>item2</tr>
            <br><br>
            <tr>item3</tr>
        </table>
        </th>
      </tr>

    </table>

Answer 4

使用div的位置相对和物品的绝对位置，左上角或右下角属性值为0