Question

当我尝试在flex的帮助下使每个字段中有2个div的1x1x1字段的大小不变时，我希望它在左侧，中部和右侧的宽度为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;，将子级设置为flex: 1;

将父级设置为display:flex;，并使用宽度将子级上的伸缩基础设置为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>

Answer 2

首先，最后一个列类仅显示“ right”而不是“ right-float”，因此不会应用CSS。

为所有3列提供一个共同的目标类。（例如“ float”）
.float {flex-basis：33.33％; flex：1; }

flex-basis会告诉所有列以1/3宽度开始，而flex：1会告诉所有列以相同的速度扩展并覆盖怪异屏幕尺寸的所有剩余像素。

CSS右浮动不能更改大小，并且大小与CSS不匹配

2 个答案: