错位对齐的盒子

Question

我是html的新手，我正在尝试制作一个基本的网页布局，所有这些都是对齐的，看起来很好，直到我开始在框中添加内容。任何人都可以帮助解决我目前遇到的令人讨厌的对齐问题。

＆＃13;

＆＃13;

.container {
  /* Auto margins used for centering elements horizontally */
  margin-right: auto;
  margin-left: auto;
  /* Box dimensions */
  width: 980px;
  /* Colour of box */
  border-radius: 10px;
  padding: 15px;
  font-size: 0px;
}

.box1 {
  width: 100%;
  height: 160px;
  background-color: #81BBC9;
  border-radius: 10px;
  display: inline-block;
  margin: 5px 0;
  /* Vertical */
  padding: 5px 0;
  /* Horizontal */
  text-align: center;
  font-size: 32px;
  font-family: sans-serif;
}

.sidebar {
  width: 300px;
  height: auto;
  background-color: #81BBC9;
  border-radius: 10px;
  text-align: center;
  font-size: 32px;
  font-family: sans-serif;
  display: inline-block;
  margin: 5px 0px;
  /* Vertical */
  margin-right: 5px;
  padding: 40px;
  /* Vertical */
}

.content {
  width: 510px;
  height: auto;
  background-color: #81BBC9;
  border-radius: 10px;
  text-align: center;
  font-size: 32px;
  font-family: sans-serif;
  display: inline-block;
  margin: 5px 0px;
  /* Vertical */
  margin-left: 5px;
  padding: 40px;
  /* Vertical */
}

p {
  font-size: 12px;
  text-align: left;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

在css。下面更新。

.content {
  width: 510px;
  height: auto;
  background-color: #81BBC9;
  border-radius: 10px;
  text-align: center;
  font-size: 32px;
  font-family: sans-serif;
  display: inline-block;
  margin: 5px 0px;
  /* Vertical */
  margin-left: 5px;
  padding: 40px;
  vertical-align: top;
  /* Vertical */
}