【问题标题】:Positioning two divs side by side using CSS [duplicate]使用CSS并排定位两个div [重复]
【发布时间】: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;
}

【问题讨论】:

    标签: html css flexbox styled-components


    【解决方案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 默认是在行中
      猜你喜欢
      • 2013-03-08
      • 2012-04-17
      • 2018-02-19
      • 2016-04-01
      • 1970-01-01
      • 1970-01-01
      • 2018-10-21
      • 2020-11-07
      • 1970-01-01
      相关资源
      最近更新 更多