使用CSS并排定位两个div [重复]

Question

我已经使用 codepen 模拟了我的问题，但是其中的每个元素都是 React 组件，所以我不想减少它们。我正在努力在相同的水平上显示我的progress-container，但在input-wrapper (input) 的左侧。

Codepen：https://codepen.io/simoncunningham/pen/mdwMgyL

<div class="progress-container"></div>
<div class="input-wrapper">
  <div class="input">I have my first input here</input>
</div>

.progress-container {
  height: 22px;
  width: 22px;
  margin-right: 16px;
  background-color: red;
  display: flex;
}

.input-wrapper {
  border: 1px solid #ced4da;
  border-radius: 2px;
  overflow-y: hidden;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
}

Answer 1

我可以使用浮动或显示：flex 提出两种解决方案，但我认为如果您可以使用 Flex 解决方案更好。

1- 浮动

.progress-container {
  height: 22px;
  width: 22px;
  margin-right: 16px;
  background-color: red;
  display: flex;
  /*edit*/
  float:left;
}

.input-wrapper {
  border: 1px solid #ced4da;
  border-radius: 2px;
  overflow-y: hidden;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;r: red;
  display: flex;
  /*edit*/
  float:left;
  clear; both;
}

<div class="progress-container"></div>
<div class="input-wrapper">
  <div class="input">I have my first input here</input>
</div>

2- Flex：你必须添加一个 div 作为父级来包装你的两个 div。

.progress-container {
  height: 22px;
  width: 22px;
  margin-right: 16px;
  background-color: red;
  display: flex;
}

.input-wrapper {
  border: 1px solid #ced4da;
  border-radius: 2px;
  overflow-y: hidden;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
}

/*edit*/
.parent-div{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

<div class="parent-div">
  <div class="progress-container"></div>
  <div class="input-wrapper">
    <div class="input">I have my first input here</input>
  </div>
</div>

Answer 2

您可以使用 wrapperDiv 类将 2 个 div 包装在另一个 div 中：

<div class="wrapperDiv">
  <div class="progress-container"></div>
  <div class="input-wrapper">
    <div class="input">I have my first input here</input>
  </div>
</div>

然后你可以定义 wrapperDiv 类如下，这将使它们并排：

.wrapperDiv {
  display: flex;
  flex-direction: row;
  align-items: center;
}

这些 css 属性代表 flexbox 布局，如果您想了解更多信息。