Question

我有一个内容div，其显示为flex，而flex方向为row。在这个div中，我还有另外两个div，一个div包含一个表单，另一个div也包含2张图像。我已经将第二个div的flex方向设置为列，并试图将所有div置于页面中间。很抱歉，如果我解释得不好，但希望以下代码能解决这个问题！

#content {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#col1 {
  width: 60%;
  border-radius: 5px;
}

#col2 {
  background: rgba(150, 143, 150, 0);
  width: 50%;
  height: auto;
  border-radius: 5px;
}

#col3 {
  background: rgba(150, 143, 150, 0);
  width: 50%;
  height: auto;
}

<div id='content'>
  <div id='col1'>
    My form is here
  </div>
  <div style="flex-direction:column">
    <div id='col2'>
      <img id='side1' src='https://via.placeholder.com/120'>
    </div>

    <div id='col3'>
      <img id='side2' src='https://via.placeholder.com/120'>
    </div>
  </div>
</div>

在此先感谢您的帮助

注意=我现在通过将col2和col3的宽度从50％更改为59vh来修复它。不确定为什么不喜欢％。

Answer 1

您必须使用此代码

    #content{
        background-color: #d2cbd2; /*  for example */
        width: 100%;
        height: auto;
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        align-items: center;
    }
    #col2{
        display: flex;
        flex-flow:wrap  row;
    }

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
      <div id='content'>
            <div id="col1">
                My form is here
            </div>
            <div id="col2">
                <div>
                  <img src="i2.jpg">
                </div>
                <div>
                    <img src="i2.jpg">
                </div>
            </div>
      </div>

</body>
</html>

如何使用display = flex和flex-direction = row将div水平居中；

1 个答案: