个人中心
gpt4 book ai didi

html - 侧边栏位置

转载 作者：可可西里 更新时间：2023-11-01 14:47:36 25 4
gpt4 key购买 nike

我试图将侧边栏放在内容的右侧，但我仍然希望它位于同一个“框”中。看: enter image description here

正如您在图片中看到的那样，它位于右侧，但不在“内容”框中，我希望它几乎直接位于我的菜单下方。请帮忙。我的代码看起来像这样(忽略丹麦注释，那只是注释):

  body {
    background: #98c8d7;
    width: 1000px;
    margin: auto;
    font-family: "Trebuchet ms", Verdana, sans-serif;
  }
  #header {
    background: #fff url(banner.jpg) no-repeat;
    margin: 10px 0 10px 0;
    padding: 8em 2em 1em 2em;
    text-align: center;
    border-radius: 15px;
    opacity: 0.8;
    border: 1px dotted #000
  }
  /*Dette formaterer menuen */
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  li {
    float: left;
  }
  a:link,
  a:visited {
    display: block;
    width: 312.5px;
    font-weight: bold;
    color: #000;
    background-color: #51a7c2;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid #91cfca;
    opacity: 0.8;
  }
  a:hover,
  a:active {
    background-color: #98c8d7;
  }
  #content {
    background: #b4cdd9;
    color: #000;
    padding: 1em 1em 1em 1em;
    top right bottom left
  }
  #tekst {
    background: #98c8d7;
    color: #000;
    opacity: 0.8;
    margin: 5px 0 5px 0;
    padding: 0.5em 1em 1em 1em;
    text-align: left;
  }
  #sidebar {
    background: #b4cdd9;
    color: #000;
    width: 320px;
    position: relative;
    float: right;
    margin: 5px 0 5px 0;
    padding: 0.5em 1em 1em 1em;
    text-align: left;
    border-style: outset;
    border-width: 3px;
    border-color: black;
  }
  a {
    color: #0060B6;
    text-decoration: none;
  }
  a:hover {
    color: #00A0C6;
    text-decoration: none;
    cursor: pointer;
  }
<!doctype html>

<head>
  <!-- Titel -->
  <title>IT-hjælp til ældre</title>
  <meta charset="utf-8">

  <link href="CSS sheet.css" rel="stylesheet" type="text/css" />

</head>

<body>

  <!-- Denne div indeholder dit content, altså din brødtekst -->
  <div id="content">

    <!--Header. Indeholder banner -->
    <div id="header">
    </div>

    <!-- Menu -->
    <ul>
      <li><a href="forside.html">Forside</a>
      </li>
      <li><a href="priser.html">Priser</a>
      </li>
      <li><a href="kontakt.html">Kontakt</a>
      </li>
    </ul>


    <!-- Her kommer din brødtekst så -->
    <div id="tekst">
      <h1>Overskrift 1</h1>

      <p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>

      <!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->
      <h2>Underoverskrift 1</h2>
      <p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>
      <div id="sidebar">
        <h3>Leon Laksø</h3>
        <p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
        <p>Mail link kunne være her?</p>
      </div>
    </div>


  </div>


</body>

</html>

最佳答案

一个快速的解决方案是更改您的 html 结构并将侧边栏移动为 div 的第一个子元素 #tekst:

body {
  background: #98c8d7;
  width: 1000px;
  margin: auto;
  font-family: "Trebuchet ms", Verdana, sans-serif;
}
#header {
  background: #fff url(banner.jpg) no-repeat;
  margin: 10px 0 10px 0;
  padding: 8em 2em 1em 2em;
  text-align: center;
  border-radius: 15px;
  opacity: 0.8;
  border: 1px dotted #000
}
/*Dette formaterer menuen */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
a:link,
a:visited {
  display: block;
  width: 312.5px;
  font-weight: bold;
  color: #000;
  background-color: #51a7c2;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid #91cfca;
  opacity: 0.8;
}
a:hover,
a:active {
  background-color: #98c8d7;
}
#content {
  background: #b4cdd9;
  color: #000;
  padding: 1em 1em 1em 1em;
  top right bottom left
}
#tekst {
  background: #98c8d7;
  color: #000;
  opacity: 0.8;
  margin: 5px 0 5px 0;
  padding: 0.5em 1em 1em 1em;
  text-align: left;
}
#sidebar {
  background: #b4cdd9;
  color: #000;
  width: 320px;
  position: relative;
  float: right;
  margin: 5px 0 5px 0;
  padding: 0.5em 1em 1em 1em;
  text-align: left;
  border-style: outset;
  border-width: 3px;
  border-color: black;
}
a {
  color: #0060B6;
  text-decoration: none;
}
a:hover {
  color: #00A0C6;
  text-decoration: none;
  cursor: pointer;
}
<body>
  <!-- Denne div indeholder dit content, altså din brødtekst -->
  <div id="content">
    <!--Header. Indeholder banner -->
    <div id="header"></div>
    <!-- Menu -->
    <ul>
      <li><a href="forside.html">Forside</a>
      </li>
      <li><a href="priser.html">Priser</a>
      </li>
      <li><a href="kontakt.html">Kontakt</a>
      </li>
    </ul>
    <!-- Her kommer din brødtekst så -->
    <div id="tekst">
      <div id="sidebar">
        <!-- move it here -->

        <h3>Leon Laksø</h3>

        <p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
        <p>Mail link kunne være her?</p>
      </div>
      <h1>Overskrift 1</h1>

      <p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>
      <!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->

      <h2>Underoverskrift 1</h2>

      <p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>

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

关于html - 侧边栏位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27037180/

25 4 0
文章推荐： windows - Windows 上的关机脚本删除注册表项？
文章推荐： hadoop - 将多个文件添加到 HIVE 中的分布式缓存
文章推荐： php - 生成人口热图 : Mapreduce?
文章推荐： javascript - 如何更改指令中元素的 css 类？
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com