Html 如何将div元素内联放置？

我正在尝试将这两个div

inline

HTML

<div class="thisFlak">
</div>

<div class="thisFlakNotes">
</div>

我不能把“.thisFlak”搞得太多，因为它还有很多其他东西

小提琴

---

您需要的是：

display: inline-block;

您的代码：

.thisFlak{
  width: 603px;
  height: 253px;
  border: 2px solid red;
  margin-left: 10px;
  margin-bottom: 30px;
  display: inline-block;
}

.thisFlakNotes{
  width: 100px;
  height: 200px;
  border: 1px solid black;
  background: white;
  display: inline-block;
}

---

您需要的是：

display: inline-block;

您的代码：

.thisFlak{
  width: 603px;
  height: 253px;
  border: 2px solid red;
  margin-left: 10px;
  margin-bottom: 30px;
  display: inline-block;
}

.thisFlakNotes{
  width: 100px;
  height: 200px;
  border: 1px solid black;
  background: white;
  display: inline-block;
}

浮动。。。

浮动。。。

CSS

CSS

---

显示：内联块

将允许您保留尺寸并将div放在同一行上。它将div视为句子中的单词，因此您需要注释掉它们之间的任何空格，因为它们的高度不同，您需要添加垂直对齐：

。这个高射炮{
垂直对齐：顶部；
宽度：603px；
高度：253px；
边框：2倍纯红；
左边距：10px；
边缘底部：30px；
显示：内联块；
}
.蓟{
垂直对齐：顶部；
宽度：100px；
高度：200px；
边框：1px纯黑；
背景：白色；
显示：内联块；
}

---

显示：内联块

将允许您保留尺寸并将div放在同一行上。它将div视为句子中的单词，因此您需要注释掉它们之间的任何空格，因为它们的高度不同，您需要添加垂直对齐：

。这个高射炮{
垂直对齐：顶部；
宽度：603px；
高度：253px；
边框：2倍纯红；
左边距：10px；
边缘底部：30px；
显示：内联块；
}
.蓟{
垂直对齐：顶部；
宽度：100px；
高度：200px；
边框：1px纯黑；
背景：白色；
显示：内联块；
}

---

通过向这两个类添加

float:left/display:inline

，您可以实现它

---

这里是更新的fiddle链接

，通过向这两个类添加

float:left/display:inline

，您可以实现它

---

这里是更新的fiddle链接

只需将display:inline block或float:left放到每个div

.thisFlak{
  width: 603px;
  height: 253px;
  border: 2px solid red;
  margin-left: 10px;
  margin-bottom: 30px;
  float : left;
  display : inline-block;
}
.thisFlakNotes{
  width: 100px;
  height: 200px;
  border: 1px solid black;
  background: white;
 float : left;
 display : inline-block;
}

---

只需将display:inline block或float:left放到每个div

.thisFlak{
  width: 603px;
  height: 253px;
  border: 2px solid red;
  margin-left: 10px;
  margin-bottom: 30px;
  float : left;
  display : inline-block;
}
.thisFlakNotes{
  width: 100px;
  height: 200px;
  border: 1px solid black;
  background: white;
 float : left;
 display : inline-block;
}

---

您可以浮动它们，也可以使用

display:inline block

，如果您使用后者，请注意它可能在块之间添加的额外空间。您也可以使用

float:left

。有很多方法可以做到这一点。这取决于你想要的结果。您可以使用

flex

或

display:inline block

您可以浮动它们或使用

display:inline block

，如果使用后者，请注意它可能在块之间添加的额外空间您也可以使用

float:left

。有很多方法可以做到这一点。这取决于你想要的结果。您可以使用

flex

或

display:inline block

我不知道为什么，但是

float left

在元素最终相互对齐时对我不起作用。我不知道为什么，但是

float left

在元素最终相互对齐时对我不起作用。

vertical align

提示的额外加号！

垂直对齐的额外附加功能

提示！