Question

我正在尝试将两列一列为左侧的垂直导航栏，而内容列应向右浮动。我尝试了所有可能的方法。该页面看起来一点也不好。我不知道我在想什么。任何帮助将不胜感激。有什么建议么？我已经尝试了几个小时，但没有成功。我仍在学习过程。我尝试将导航栏向左浮动，将内容向右浮动，但这并没有按要求进行。

body {
  background-color: red;
  color: black;
  font-family: Verdana, Arial, sans-serif;
}

#wrapper {
  background-color: #dce9f7;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  min-width: 700px;
  box-shadow: 5px 5px 5px 5px #828282;
}

h1 {
  background-color: #d9c7b4;
  color: black;
  text-align: center;
}

h2 {
  background-color: white;
  font-size: 1.2em;
  padding-left: 10px;
  padding-bottom: 5px;
}

#nav {
  text-align: center;
}

#content {
  padding: 25px;
}

.floatright {
  float: right;
  padding-bottom: 20px;
}

.floatleft {
  float: left;
  padding: 20px;
}

<div id="wrapper">
  <h1>The Nothing Burger</h1>
  <div id="nav">
    <a href="index.html">Home</a>
    <a href="menu.html">Menu</a>
    <a href="location.html">Location</a>
  </div>
  <h2>Only the best food!</h2>
  <div class="floatright">
    <img src="plate.jpg" alt="Great Food" width="333" height="156">
  </div>
  <div id="content">
    <ul>
      <li>Fresh, Healthy Cuisine</li>
      <li>Friendly Service</li>
      <li>Open for Breakfast, Lunch and Dinner</li>
    </ul>
  </div>
  <div>123 Elm Street<br/> Appleton, CA<br/> 1-888-555-5555
    <br/><br/>
  </div>
</div>

Answer 1

在navbar元素和content元素周围添加一个包装div，如下所示，并添加这些样式

.wrapperDiv {
  display: flex;
}

#nav {
  width: 30%;
}

.content-wrapper {
  width: 70%
}

#nav a {
  display: block;
}

body {
  background-color: red;
  color: black;
  font-family: Verdana, Arial, sans-serif;
}

#wrapper {
  background-color: #dce9f7;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  min-width: 700px;
  box-shadow: 5px 5px 5px 5px #828282;
}

h1 {
  background-color: #d9c7b4;
  color: black;
  text-align: center;
}

h2 {
  margin: 0;
  background-color: white;
  font-size: 1.2em;
  padding-left: 10px;
  padding-bottom: 5px;
}

#nav {
  text-align: center;
}

#content {
  padding: 25px;
}

.floatright {
  float: right;
  padding-bottom: 20px;
}

.floatleft {
  float: left;
  padding: 20px;
}

.wrapperDiv {
  display: flex;
}

#nav {
  width: 30%;
}

.content-wrapper {
  width: 70%
}

#nav a {
  display: block;
}

<body>
  <div id="wrapper">
    <h1>The Nothing Burger</h1>
    <div class="wrapperDiv">
      <div id="nav">
        <a href="index.html">Home</a>
        <a href="menu.html">Menu</a>
        <a href="location.html">Location</a>
      </div>
      <div class="content-wrapper">
        <h2>Only the best food!</h2>
        <div class="floatright">
          <img src="plate.jpg" alt="Great Food" width="333" height="156">
        </div>
        <div id="content">
          <ul>
            <li>Fresh, Healthy Cuisine</li>
            <li>Friendly Service</li>
            <li>Open for Breakfast, Lunch and Dinner</li>
          </ul>
          <div>123 Elm Street<br/> Appleton, CA<br/> 1-888-555-5555
            <br/><br/>
          </div>
        </div>
      </div>
    </div>

如何成功创建两列布局？一个用于垂直导航栏在左侧，内容在右侧

1 个答案: