css - HTML 5 三列布局

我还是 HTML 5 的新手。我正在尝试构建索引页面，但遇到了一些问题。我正在尝试使用侧面带有一些导航链接的三列布局，并且我希望标题下方有一些导航链接。我尝试了几种方法但没有运气。我也试图在两列之间拉伸(stretch)图片，但我不确定我的编码是否正确，因为所有内容之间的空间太大。我将张贴一张我希望索引页显示的图片。任何建议，将不胜感激。

nav {
  float: left;
  width: 150px;
  box-sizing: border-box;
  display: block;
}

main {
  margin: 0 210px 0 160px;
  padding: 1px 10px 20px 10px;
  background-color: #FFFFFF;
  display: block;
  color: #000000
}

body {
  background-color: #FFFFFF;
  margin: 0;
}

header {
  background-color: #000000;
  color: #FFFFFF;
  text-align: right;
  box-sizing: border-box;
  display: block;
  height: 120px;
  padding: 0 20px;
  border-bottom: 2px solid;
}

aside {
  display: block;
  box-sizing: border-box;
  float: right;
  width: 150px;
}

footer {
  display: block;
  box-sizing: boreder-box;
  font-size: .70em;
  color: #FFFFFF;
  background-color: #000000 padding-top: 10px;
  clear: both;
}

#container {
  background-color: #969696;
  color: #000000;
  min-width: 960px;
  font-family: Verdana, Arial, sans-serif;
}

<!DOCTYPE html >
<html lang="en">

<head>
  <title>St. Pete Flower Market</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="test.css">
</head>

<body>
  <div id="container">
    <header role="banner">
      <span><a href="#search">Search</a></span>
      <h1>St. Pete Flower Market</h1>

    </header>
    <nav role="navigation">
      <ul>
        <li><a class="navigation" href="index.html">Home</a></li>
        <li><a class="navigation" href="contact.html">Contact Us</a></li>
        <li><a class="navigation" href="occasions.html">Occasions</a></li>
        <li><a class="navigation" href="flowers.html">Flowers</a></li>
        <li><a class="navigation" href="giftbaskets.html">Pricing</a></li>
        <li><a class="navigation" href="deals.html">Deals</a></li>
        <li><a class="navigation" href="about.html">About Us</a></li>
      </ul>
    </nav>
    <aside role="complementary">
    </aside>
    <main role="main" id="content">
      <h2><img src="roses.jpg" width="1148" height="300" alt="Roses"></h2>
      <h3>fjfjfwjif</h3>
      <footer role="contentinfo"> fjiefjwiofjewfjiewofjewo</footer>
    </main>
  </div>
</body>

</html>

最佳答案

查看 flex 或 grid。

如果您自己动手，这些可以帮到您很多。

这里有一些很棒的链接可以查看。

这些都可以帮助创建您想要的 3 列布局。

此外，如果您愿意，可以使用 bootstrap 4，它可以让您的生活更轻松。

> https://getbootstrap.com/

希望对你有帮助。

关于css - HTML 5 三列布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48626603/

css - HTML 5 三列布局

上一篇：html - 将汉堡菜单对齐到屏幕右侧

下一篇：php - 我怎样才能阻止这个图像移动？