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

Posted 2023-03-15

【中文标题】使用CSS并排定位两个div [重复]

【英文标题】：Positioning two divs side by side using CSS [duplicate]

【发布时间】：2021-11-09 14:37:54

【问题描述】：

我已经使用 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;

【参考方案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>

【参考方案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 布局，如果您想了解更多信息。

【讨论】：

努力，但 flex-direction 默认是在行中