HTML + CSS DIV 对齐布局

Question

我正在尝试制作一个投资组合网站，但我无法弄清楚 CSS 部分与 DIV 的组合。我正在尝试使用这种布局制作网站：

这就是我得到的：

body {
  margin: 0;
  padding: 0;
}
.menu {
  height: 100vh;
  width: 380px;
  background-color: #5B91AC;
  float: left;
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px 10px;
}
.menu img {
  width: 100%;
}
.container {
  position: relative;
  left: 400px;
  width: 100%;
  background-color: yellow;
  padding: 20px 10px;
}
.content {
  max-width: 768px;
}

<body>
  <!-- Start of menu (at left side) -->
  <div class="menu">
    <img class="logo" src="http://placehold.it/788x208" />
  </div>
  <!-- End of menu -->

  <div class="container">
    <div class="content">

    </div>
  </div>
</body>

http://jsfiddle.net/gv19a3mw/1/

有人可以指出正确的方向或帮助我 CSS 吗？

Answer 1

这就是您实现目标的方法Demo Pen

*{
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.menu{
  height:100vh;
  width: 25%;
  background-color: #5B91AC;
  float: left;
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px 10px;
}
.menu img {
  width: 100%;
}
.container {
  width: 75%;
  background-color: #bdc3c7;
  padding: 20px 10px;
  margin: 0 0 0 25%;
  float: left;
}
.content {
  /* max-width:768px */;
  background-color: #ecf0f1;    
}

HTML + CSS DIV 对齐布局

HTML + CSS DIV alignment layout

html

css

alignment