所有三个文本元素都在一个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>这里有一个关于如何使用flex实现这一点的小示例。
我在有display: flex和justify-content: space-between的列周围有一个包装器，将列的剩余空间放在它们之间
使用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>