html - 如何创建旁边有 2x3 网格的侧边栏-6ren

html - 如何创建旁边有 2x3 网格的侧边栏

转载作者：太空宇宙更新时间：2023-11-04 00:38:09

35

4

我想创建一个侧边栏和一个具有 2 行和 3 列的网格(在侧边栏旁边)。我已经有一个导航栏和一个页脚(只是一个布局，链接不应该工作)

我不知道如何使用 flexbox 创建侧边栏和主要内容网格。

哦，还有超人标志:出于某种原因，我无法将它垂直居中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>web1</title>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <div class="menu-container">
      <div class="logo-container">
          <div class="logo"><img src="https://seeklogo.com/images/1/3-colors-superman-logo-ACD3F1907B-seeklogo.com.png"></div>
      <nav class="menu"> 
          <div class="buttonid">
            <a href="#" class="myButton">Avaleht</a>
            <a href="#" class="myButton">Tooted</a>
            <a href="#" class="myButton">Kontakt</a>
          </div>
    </div>
      </div>
      </nav>
    <div class="footer">
        <div class="footer-item">SEE TÖÖTAB VIST</div>
    </div>
  </body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  .menu-container {
    color: #fff;
    background-image: linear-gradient( rgb(0, 0, 0), rgb(255, 0, 0));
    padding: 20px 0;

  }

  .logo-container {
    display: flex;
    border: blue solid 2px;
    height: 100px;
  }

  .menu {
    border: white solid 3px;
    width: 100%;
    text-align: center;
  }

  .myButton {
    box-shadow:inset 0px 1px 0px 0px #cf866c;
    background:linear-gradient(to bottom, #d0451b 5%, #ff0000 100%);
    background-color:#ff0000;
    border-radius:3px;
    border:1px solid #ffffff;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:13px;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #854629;
}
.myButton:hover {
    background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
    background-color:#bc3315;
}
.myButton:active {
    position:relative;
    top:1px;
}

.logo img {
  width: 100px;
}

.footer {
  color: #fff;
  background-image: linear-gradient( rgb(0, 0, 0), rgb(255, 0, 0));
  padding: 20px 0;
  position: absolute;
  bottom: 1px;
  width: 100%;
}

.footer-item {
  text-align: center;
  font-weight: bold;
  word-spacing: 30px;
}

.buttonid {
  align-items: center;
  word-spacing: 30px;
  height: 100px;
  display: flex;
  justify-content: center;
}

最佳答案

您应该将布局分成不同的区域，并为每个区域使用一个 HTML 容器。 HTML5 给我们带来了一些，用它们代替 div，代码将有意义且易于阅读。

首先开始构建 CSS 布局，页眉、主体和页脚，然后是主体的内容(边栏和行)。

示例从 : ( possible example to come up with )

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header,
footer,
aside,
article {
  border: solid;
}

main,
section {
  flex: 1;
  display: flex;
}

section {
  flex-wrap: wrap;
}

article {
  flex: 1;
  min-width: 30%;
}

/* is sizing an issue ? */
 /* try */
 
 body:hover * { padding:0.25em;transition:0.25s;box-sizing:border-box;}
body:hover aside, body:hover article {margin:2px;}

<header>
  header</header>
<main>
  <aside>
    aside
  </aside>
  <section>
    <article> article</article>
    <article> article</article>
    <article> article</article>
    <article> article</article>
    <article> article</article>
    <article> article</article>
  </section>
</main>
<footer>footer</footer>

从那里你有一个模板，你可以在其中插入你的内容，添加类或 id 并根据需要为每个部分设置样式

关于html - 如何创建旁边有 2x3 网格的侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58940911/

35

4

0

文章推荐：右下角的 CSS 堆栈元素(逐行，顺序很重要，元素具有不同的宽度)

文章推荐： python - 找出是否使用了三角函数并跟踪符号变量

文章推荐： python - ftplib 连接到 SFTP 服务器没有错误

文章推荐： python - Pandas 中 Series 子集的条件转换

css - 将内容放在 h1 旁边
我想在下面添加按钮标签，但不知道使用什么 CSS 来实现。下图显示了一个可能的场景，“Main_Page”标题和按钮构成了一个单独的 div 的每个部分。我尝试使用 margin-top属性，但想
html - 图像不会出现在 slider 旁边
我的图像不会位于 slider 旁边.. 而只是堆叠在 slider 下方。好像没有空间放置图像，因为 slider 占用了太多空间，但是当我查看代码时，情况似乎并非如此，除非我错过了什么:) Thi
html - 如何将按钮放在另一个按钮的(右侧)旁边
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 6 年前。 Improve
html - 如何将图像放在文本 CSS 旁边
我想在文本的左侧放置一个图像，并根据窗口的分辨率保持原样。这是没有图像的样子:http://prntscr.com/fmky4f 这是我希望它放置后的样子。 https://prnt.sc/fmkk
javascript - 滚动时弹出模型隐藏在 body 旁边？
我创建了一个button，当我点击button然后popup模型显示时，它会隐藏在页面主体旁边，按钮也会隐藏我滚动。我希望当弹出窗口出现时我无法滚动我的页面主体。我使用 Bootstrap 创建了模型
html - 如何将文本放在 div 旁边？
我是一名学生网络开发人员，需要一些帮助。我需要复制这个 wikipedia page尽我所能我想把 Story 和下面的 div 放在官方 wiki 页面上的位置。另一个问题是游戏玩法“div”，
html - 如何将菜单放在 Logo 旁边？
需要这项工作的 header 的屏幕截图: 如您所见，菜单位于 Logo 下方。我想要它旁边的菜单，在 Logo 的右侧。我不知道这是否可行，但如果可行，我需要一些帮助，谢谢。这是所有内容的代码，为
css - 如何使文本填充由具有负左边距的图像(旁边)创建的空白？
基本上，我们必须有这样的布局，其中图像必须溢出容器，文本填充图像创建的空间(向左偏移)。我们目前有这样的结构: Some paragraph
html - 偏移滚动条出现在子 div 旁边
我有一个“弹出式”表格，它是一个固定元素。该表有时太高以适应某些屏幕，因此我将 overflow 设置为 auto。然而，滚动条似乎与弹出表格分离，因为父 div 是屏幕的宽度而表格较小。有没有办法让
css - 如何将图像放在 div 旁边
我有一个带有边框的 div: 表示上面内容的div使用的样式是这样的: const style = { textAlign: "center", mar
html - 将图像完美地放在 div 旁边
如何在各种屏幕尺寸下完美地放置图像？ .background-login { background: url(../img/login.png) no-repeat; background-s
android - Flutter:将图标放置在居中的 CircleAvatar 旁边
我正在尝试在居中的圆形头像旁边的右上角放置一个编辑图标。但是，如果我在行小部件中使用中心小部件，它就不起作用: Row( children: [
ios - 将单元格名称传递给 View Controller 旁边
首先，感谢您阅读我的问题! 因此，我遇到了一些有关将单元格名称传递到下一个 View 的问题。现在它会传递它，但只会显示最近加载的单元格。现在的编程方式如下: var passName = "" v
css - 将文字移到 Logo 旁边；摆脱硬性规定
这是网站:www.red-tuxedo.com 我希望“红色燕尾服”文本位于 Logo 旁边，而不是下方，并且我想摆脱贯穿 Logo 的硬性规定。我的 CSS/HTML 技能达不到要求。当我更改文本时
css - 水平菜单，位置固定，div 旁边
我有一个顶部水平菜单栏，宽度为 100%，居中对齐，位置固定，因此它不会随页面滚动。但我还想在菜单左侧的菜单内联一个名称(例如名为 test)。但即使我使用内联 block ，它也会根据左侧的 d
html - div 漂浮在居中的 div 旁边？
我有一个 4 个链接。我希望他们都在同一行。其中两个在中间，另外两个在右边。我把它们包了两个又两个，但我无法让它工作。我的 CSS 是这样的: #links_center { } #links_ri
javascript - 网格元素不在彼此 Material UI 旁边
我在 material-ui 中使用 Grid 组件。我无法让网格元素相互堆叠。现在他们正在彼此堆叠。我不确定是什么让它们堆叠在一起。我已经这样做了，所以只有在小屏幕上网格元素才会堆叠在一起，否则每个
html - 将按钮放在内联 block div 旁边
我试图在固定宽度的内联 block div 旁边放置一个按钮。但它就在 div 的下面。我试过减少容器的宽度，但这是行不通的。我想在不将类添加按钮放在单独的容器中的情况下完成此操作。该按钮应位于 .i
html - 将图像放置在 div 旁边(聊天气泡)
我在“聊天气泡”旁边有一个用户的图像，但该图像显示在气泡之后。我如何将图像放在聊天气泡之前并固定在 div 上？我的代码在这里:http://www.codepen.io/anon/pen/fFx
html - 将图像放在 Navbar Bootstrap 旁边
编辑 #1:这是问题的图片: 编辑 #2:这是我使用品牌类后的图片编辑#3: 我正在尝试将图像 float 到导航栏旁边。它一直有效，直到我的导航栏宽度达到 100%。然后导航栏位于图像下方。这是

首页

博学

6Ren·AI

商城

html - 如何创建旁边有 2x3 网格的侧边栏