我的页面上有三列文本，但右列在底部，与其他三列分开

Question

所有三个文本元素都在 div 中。我想要一个大的和两个小的在它的两侧。左边很好，中间也很好，但右边的列在页面底部。左右两列几乎相同css。我希望右栏像左栏一样。提前致谢。

html
{
    width: 100%;
    height: 100%;
}

body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    text-align: center;
}

#header
{
    width: 100%;
    height: 50%;
    background-image: url("woodBack.png");
    background-repeat: no-repeat;
    background-size: 100%, 100%;
    background-attachment: fixed;
}

#Dove
{
    width: 30%;
    height: 58%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
}

.navButtons
{
    outline: none;
    border: 0px;
    width: 100px;
    height: 60px;
    font-size: 15px;
    margin-left: 5px;
    margin-right: 5px;  
}

#buttonDiv
{
    margin-bottom: 15px;
    margin-top: 15px;
}

#mainHr
{
    width: 85%
}

#leftColumn
{
    float: left;
    width: 20%;
    padding: 15px;
    border-style: solid;
    border-width: 2px;
    margin-top: 0px;
    margin-left: 40px;
    border-color: black;
}

#middleColumn
{
    text-align: left;
    border: black;
    border-width: 2px;
    border-style: solid;
    width: 40%;
    margin: auto;
    margin-top: 15px;
    font-size: 15px;
    padding: 15px;
}

#rightColumn
{
    float: right;
    width: 20%;
    padding: 15px;
    border-style: solid;
    border-width: 2px;
    margin-top: 0px;
    margin-right: 40px;
    border-color: black;
}

#bodyText
{
    width: 100%;
}

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="homeStyles.css">
    <title>CCEV - Home</title>
</head>
<body>

<div id="header">
<img id="Dove" src="headerImg.png">
</div>

<div id="buttonDiv">

<button class="navButtons" >Upcoming</button> <button class="navButtons" >Get Help</button> <button class="navButtons" >Youth Group</button>
<button class="navButtons" >Join Us</button> <button class="navButtons" >Services</button> <button class="navButtons" >Donate</button>
<button class="navButtons" >Contact</button>

</div>

<hr id="mainHr">

<div id="bodyText">

<p id="leftColumn">
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
</p>

<p id="middleColumn">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat<br>
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat<br>
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat<br>
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat<br>
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat<br>
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat<br>
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
</p>

<p id="rightColumn">
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
</p>

</div>

</body>
</html>

Answer 1

这里有一个小例子，说明如何使用 flex 实现这一点。

我在包含 display: flex 和 justify-content: space-between 的列周围有一个包装器，用于将剩余的 space 列放在它们之间

with flex: 0 0 50% 和 flex: 0 0 20%; 我设置了这些列的 witdh

.wrapper {
  display: flex;
  justify-content: space-between;
}

.column-middle {
  flex: 0 0 50%;
}

.column-small {
  flex: 0 0 20%;
}

<div class="wrapper">
  <div class="column column-small">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus impedit sunt fugit repudiandae omnis, asperiores voluptatibus inventore sit dolore officia, recusandae hic ratione eum aperiam aliquid. At adipisci, veritatis placeat!
  </div>
  <div class="column column-middle">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae consectetur delectus repellendus minima repellat, est rerum, quo numquam animi. Officiis tempore quibusdam fugiat voluptatibus, nesciunt provident dolorem amet deserunt ipsam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae consectetur delectus repellendus minima repellat, est rerum, quo numquam animi. Officiis tempore quibusdam fugiat voluptatibus, nesciunt provident dolorem amet deserunt ipsam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae consectetur delectus repellendus minima repellat, est rerum, quo numquam animi. Officiis tempore quibusdam fugiat voluptatibus, nesciunt provident dolorem amet deserunt ipsam?
  </div>
  <div class="column column-small">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus impedit sunt fugit repudiandae omnis, asperiores voluptatibus inventore sit dolore officia, recusandae hic ratione eum aperiam aliquid. At adipisci, veritatis placeat!
  </div>
</div>

我的页面上有三列文本，但右列在底部，与其他三列分开

There are three columns of text on my page but the right column is at the bottom, separated from the other three

html

css

text

multiple-columns