CSS right float 无法更改大小和大小不匹配 css

Question

当我尝试在 flex 的帮助下制作一个 1x1x1 字段，每个字段有 2 个 div 时，大小没有改变，我希望它在左侧、中间和右侧的宽度为 33.33%，但它似乎不起作用.概括:我希望左、中、右 div 的宽度相等。

我已经尝试过更改宽度并尝试过 flexbox，但如果我让它工作的话，这似乎是最好的解决方案。

{HTML}

<section class="Sec-Settings">
        <div class="Settings">
            <div class="left-float">
                <div class="profile-img">
                    <p style="margin:0;">Profile Img</p>
                </div>
                <div class="profile-name">
                    <p style="margin:0;">Profile Name</p>
                </div>
            </div>
            <div class="middle-float">
                <div class="account-information">
                    <p style="margin:0;">Account Information</p>
                </div>
                <div class="delete-account">
                    <p style="margin:0;">Delete Account</p>
                </div>
            </div>
            <div class="right">
                <div class="change-account-information">
                    <p style="margin:0;">Change Account Information</p>
                </div>
            </div>
        </div>
    </section>

{/HTML}

{CSS}

.Sec-Settings {
  padding-top: 100px;
  margin: auto;
}

.Sec-Settings .Settings {
  margin: auto;
  width: 96vw;
  height: 86vh;
  background-color: #333;
  border-radius: 10px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.Sec-Settings .Settings .left-float,
.Sec-Settings .Settings .middle-float,
.Sec-Settings .Settings .right-float {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.Sec-Settings .Settings .middle-float {
  width: 30vw;
}

.Sec-Settings .Settings .right-float {
  width: 30vw;
}

.Sec-Settings .Settings .middle-float {
  margin: 0 3px;
}

.Sec-Settings .Settings .profile-img {
  height: 33.33%;
  width: 100%;
  border-radius: 10px 0 0 0;
  background-color: dimgray;
}

.Sec-Settings .Settings .profile-name {
  height: 66.77%;
  width: 33.33%;
  border-radius: 0px 0px 0px 10px;
  background-color: #1a1a1a;
}

.Sec-Settings .Settings .account-information {
  height: 90%;
  width: 100%;
  background-color: #a71515;
}

.Sec-Settings .Settings .change-account-information {
  height: 90%;
  width: 100%;
  background-color: #a71515;
}

@media screen and (max-width: 700px) {
  .Sec-Settings {
    width: 100%;
    border-radius: 0;
    height: 400px;
  }
  .Sec-Settings .Settings {
    width: 100%;
  }
}

{/CSS}

如果更容易阅读的话，还有 scss

{SCSS}

.Sec-Settings {
  padding-top: 100px;
  margin: auto;


  .Settings {
    margin: auto;
    width: 96vw;
    height: 86vh;
    background-color: #333;
    border-radius: 10px 10px;
    // padding: 6px;
    // padding-left: 15px;
    // padding-top: 7px;
    display: flex;

    .left-float,
    .middle-float,
    .right-float {
      flex: 1;
    }

    // .left-float,
    // .right-float,
    // .middle-float {
    //   width: 33.33%;
    // }

    .middle-float {
      width: 30vw;
    }

    .right-float {
      width: 30vw;
    }

    .middle-float {
      margin: 0 3px;
    }


    .profile-img {
      height: 33.33%;
      width: 100%;
      border-radius: 10px 0 0 0;
      background-color: dimgray;
    }

    .profile-name {
      height: 66.77%;
      width: 33.33%;
      border-radius: 0px 0px 0px 10px;
      background-color: #1a1a1a;
    }

    .account-information {
      height: 90%;
      width: 100%;
      background-color: #a71515;
    }

    .change-account-information {
      height: 90%;
      width: 100%;
      background-color: #a71515;
    }

    .delete-account {

    }
  }
}

{/SCSS}

Answer 1

有两种简单的方法可以使用 flex 实现等宽列布局。我更喜欢使用 justify-content:stretch; 的第一种方法，因此无论列数如何，您都可以使用相同的设置。

将父级设置为 display:flex; justify-content: stretch; 并将 child 设置为 flex: 1;

将父级设置为 display:flex; 并使用宽度将子级的 flex-basis 设置为 flex: 1 0 33.33%;

.Settings {
  display: flex;
  justify-content: stretch;
}

.Settings>div {
  flex: 1;
}

<div class="Settings">
  <div class="left-float">
    <div class="profile-img">
      <p style="margin:0;">Profile Img</p>
    </div>
    <div class="profile-name">
      <p style="margin:0;">Profile Name</p>
    </div>
  </div>
  <div class="middle-float">
    <div class="account-information">
      <p style="margin:0;">Account Information</p>
    </div>
    <div class="delete-account">
      <p style="margin:0;">Delete Account</p>
    </div>
  </div>
  <div class="right">
    <div class="change-account-information">
      <p style="margin:0;">Change Account Information</p>
    </div>
  </div>
</div>