首页 > html > three_column > CSS Layout - 如何非事件高度三列布局

CSS Layout - 如何非事件高度三列布局

three_column 【three_column】
我们想知道如何非事件高度三列布局。
代码展示 运行结果 


<html>
<head>
<style>
#frame {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  background-color: #ffffff;
}

#page {
  margin: 0px 10px 10px 10px;
}

#header {
  background-color: #cccccc;
  padding: 10px;
  height: 120px;
}

#navigation {
  background-color: #efefef;
  padding: 10px;
  height: 40px;
}

#footer {
  background-color: #cccccc;
  padding: 10px;
  height: 40px;
  clear: both;
  border-top: 20px solid #ffffff;
}

/* 3 columns */
.column1of3, .column2of3, .column3of3 {
  float: left;
  width: 280px;
  background-color: #cccccc;
  padding: 10px;
  margin-top: 20px;
}

.column1of3, .column2of3, .columns1and2of3 {
  margin-right: 20px;
}

.columns1and2of3, .columns2and3of3 {
  float: left;
  width: 600px;
  background-color: #cccccc;
  padding: 10px;
  margin-top: 20px;
}
</style>
</head>
<body>
  <div id="frame">
    <div id="page">
      <div id="header">header</div>
      <div id="navigation">navigation</div>
      <div class="column1of3">Lorem ipsum dolor sit amet, consectetur
        adipiscing elit.</div>
      <div class="column2of3">Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Quisque vel sem odio, et tincidunt magna. Nam
        malesuada justo non risus ullamcorper eget dignissim erat viverra.</div>
      <div class="column3of3">Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Quisque vel sem odio, et tincidunt magna. Nam
        malesuada justo non risus ullamcorper eget dignissim erat viverra.
        Mauris viverra massa ac libero feugiat tempor. Cras scelerisque
        fermentum dui et feugiat. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per inceptos himenaeos.</div>
      <div id="footer">footer</div>
    </div>
  </div>
</body>
</html>