Html 如何限制一个div停留在另一个2 div的底部

我得到了3个div，宽度为33%

<div class="row">
  <div class="col-md-4">a</div>
  <div class="col-md-4">a</div>
  <div class="col-md-4">a</div>
</div>

---

如何限制第三个div不与其他两个div对齐，我希望一行中的前两个div和使用CSS属性的第三个div底面？？？

如果您只希望第三个div显示在下一行或底面，那么只需给它块级显示，如下所示：

.col-md-4{ 显示：内联块； 宽度：33%； 高度：100px； 背景色：红色； } .街区{ 显示：块； } 1. 2. 3. 您的代码：

<div class="row">
  <div class="col-md-4">a</div>
  <div class="col-md-4">a</div>
  <div class="col-md-4">a</div>
</div>

解决方案：

<div class="row">
  <div class="col-md-4" style="display: inline-block;">a</div>
  <div class="col-md-4" style="display: inline-block;">a</div>
  <div class="col-md-4">a</div>
</div>

---

你可以在你的css上试试这个

.col-md-4{
  width:33.33%;
  display:inline-block;
}

.col-md-4:nth-of-type(3){
 display:block;
}

---

由于您使用的是bootstrap，所以很容易实现这一点，因为您所需要做的就是超过12列的行概念

只需将col-md-12添加到您的最后一个div

a1 a2 a3 您的代码：

<div class="row">
 <div class="col-md-4">a</div>
 <div class="col-md-4">a</div>
 <div class="col-md-4">a</div>
</div>

解决方案：

<div class="row">
 <div class="col-md-4">a</div>
 <div class="col-md-4">a</div>
 <div class="col-md-5">a</div>
</div>

Col-4 Col-4 Col-12 设置要显示的前两个div的样式：内联块；第三个显示：块

工作

试试这个

<style>
    .col-md-4{
        width: 100px;
        height: 100px;
        background-color: burlywood;
        border : 1px solid black;
    }


</style>

<div class="row">
  <div class="col-md-4">a</div>
  <div class="col-md-4">a</div>
  <div class="col-md-4">a</div>
</div>

---

这是我的简单解决方案。我在下面的代码中使用CSS网格

HTML代码：

<div class="row">
  <div class="col-md-4">Text One</div>
  <div class="col-md-4">Text Two</div>
  <div class="col-md-4">Text Three</div>
</div>

---

你想保持三个div的宽度相同吗？你能通过下面的解决方案解决这个问题吗？

<div class="row">
  <div class="col-md-4">Text One</div>
  <div class="col-md-4">Text Two</div>
  <div class="col-md-4">Text Three</div>
</div>

.row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}
.row div:last-child {
  grid-column: 1/3;
}