首页 > html > column > CSS Layout - 如何创建具有固定宽度和页脚的列

CSS Layout - 如何创建具有固定宽度和页脚的列

column 【column】
我们想知道如何创建具有固定宽度和页脚的列。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
  width: 960px;
  border: solid;
}

.column1of2 {
  float: left;
  width: 620px;
  margin: 10px;
}

.column2of2 {
  float: left;
  width: 300px;
  margin: 10px;
}
</style>
</head>
<body>
  <h1>This is a test. </h1>
  <div class="column1of2">
    <h3>This is a test. </h3>
    <p>This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    </p>
    <p>This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    </p>
    <h3>Further Innovations</h3>
    <p>This is a test. This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. </p>

  </div>
  <div class="column2of2">
    <h3>Bicycle Timeline</h3>
    <ul>
      <li>1817: Draisienne</li>
      <li>1865: Velocipede</li>
      <li>1870: High-wheel bicycle</li>
      <li>1876: High-wheel safety</li>
      <li>1885: Hard-tired safety</li>
      <li>1888: Pneumatic safety</li>
    </ul>
  </div>
  <div style="clear: both"></div>
</body>
</html>