Question

我不知道为什么我不能让这三个flexbox元素在屏幕上水平排列。左元素和中心元素可以并排很好地工作，并且中心div正确地在屏幕上居中。右侧列正确地位于右侧，但由于某种原因，它位于底部，即中心元素底部所在的底部。

.container {
    width: 100%;
    max-width: 800px;
    min-height: 90%;
    font-size: .75rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.left-column {
    left: 2px;
    max-height: 90%;
    max-width: 25%;
    position: relative;
    float: left;
    font-family: Poppins;
    color: #D7DBDE;
    margin-top: 11%;
    padding-top: 20px;
    text-shadow: 1px 2px 3px;
}

.center-column {
    padding-top: 15px;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.right-column {
    right: 2px;
    max-height: 90%;
    max-width: 25%;
    position: relative;
    float: right;
    font-family: Poppins;
    color: #D7DBDE;
    text-shadow: 1px 2px 3px;

}

Answer 1

首先，在使用float时不需要使用所有flex属性。如果要将left和right列推到左侧和右侧，只需使用以下命令即可实现：

//To push the right and left columns to right and left sides
.container {
    ...
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

//To make even space between the columns 
.container {
    ...
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

//To pull all columns to left
.container {
    ...
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

//To push all columns to right
.container {
    ...
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

列的样式

.container {
    width: 100%;
    font-size: .75rem;
    border: 1px solid red;
    padding: 10px; 
    /* Apply Different flex properties */
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.container > div{
    border: 1px solid blue;
    padding: 20px;
    margin: 5px;
}
</style>


<div class="container">
    <div class="left-column">Left</div>
    <div class="center-column">Center</div>
    <div class="right-column">Right</div>
</div>

Answer 2

左列有margin-top: 11%;，请删除该列，不要将float与flex一起使用

.container {
    width: 100%;   
    font-size: .75rem;
    display: flex;    
}
.container div{
  padding: 15px 5px 0 5px;
}
.left-column,.right-column {  
  font-family: Poppins;
    color: #D7DBDE;
    text-shadow: 1px 2px 3px;
}

<div class="container">
      <div class="left-column">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
      <div class="center-column">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
      </div>
    <div class="right-column">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
    </div>
  </div>

无法使flexbox元素水平排列

2 个答案: