html - 如何使 <aside> 作为包含内容的列-6ren

html - 如何使
作为包含内容的列

转载作者：行者123 更新时间：2023-11-28 16:25:18

25

4

正如我的标题所述，我有一个网站，我试图将其基本上分为三栏。左边的第一列将包含

栏，最大的列将是包含段落、图像等的中心内容区域...

然后对于最右边的列，我需要它是一个

元素，它与其他列的高度相同，并且与

列的宽度相同，它大约占包含大多数列的 50%的内容。我的问题是我根本不知道如何配置边距、填充等以获得这种类型的布局。到目前为止，我已尽力而为，但无法让 aside 元素显示为一列。这是我的 HTML:

    <!DOCTYPE html>
<html>
    <head>
    <title>Juniper Lane Swimming Club Inc., Bridgewater, NJ 08807</TITLE>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
<body>

    <div id="wrapper">
        <header>
            <img src="header.jpg" alt="header">

        </header>


    <nav>
        <ul>

          <li><a href="http://www.jlsc.org">Home</a></li>
          <li><a href="pool-info.htm">Pool Information</a></li>
          <li><a href="news-events.htm">News &amp; Events</a></li>
          <li><a href="swim-team.htm">Swim Team</a></li>
          <li><a href="swim-lessons.htm">Swim Lessons</a></li>
          <li><a href="jlsc-board.htm">JLSC Board </a></li>
          <li><a href="photo-gallery.htm">Photo Galleries</a></li>
          <li><a href="links-htm.htm">Useful Information</a></li>
          </ul>
        </nav>
          <main>
        <img src="hp-1.jpg" id="hp1" alt="pool" width="241" height="172"><h2 style="color: blue;">Welcome to Juniper Lane Swim Club!</h1>
            <p>Juniper Lane is the neighborhood club where family fun is #1!</p>
            <p>Whether you're looking for a place to take the kids, swim a few laps <br>
          to stay in shape or just relax on a lounge chair with a good book - Juniper Lane is the place for you.<br>
            </p>
            <p>&nbsp;</p>
            <img src="hp-3.jpg" id="hp3" alt="bench" width="237" height="172">


                <p class="greebtext">About Us - </p>
                  <p>The Juniper Lane Swim Club is a member owned non-profit, private swimming club located in Bridgewater, NJ.</p>
                  <p>The club was established in 1955 but the facility has been renovated and well-maintained over the years</p>
                  <img src="hp-2.jpg" id="hp2" alt="poolslide" width="237" height="172"><br>
                  <p>We maintain a membership of 180 families strong. Although we are currently at our maximum, we maintain a waiting list of families who are interested in joining the club. We are typically able to accomodate a number of new families each year through normal attrition. If you are interested in a JLSC membership or information please send an email to 
                  <!-- Start email --> 
                  <script  type="text/javascript" 
src="http://www.jlsc.org/code/java/email/email.js"></script>
                  <!-- End email -->.</p>
                <p>We are located on Juniper Lane in Bridgewater Township, just 
off Country Club Rd about 1mi north of Garretson Rd.</p>



 </main>
 <footer>
 <small><i>Copyright &copy; 2017 Juniper Lane Swim Club</i></small>
  <small></a></small>
 </footer>
 </div>
</body>
</html>

And Here is the CSS:
    Body {
    margin:auto;
    padding:0px;
    background-color:#59b3d2;
    background-repeat: repeat;
    background-position: top center;
    font-family: Verdana, Geneva, sans-serif;
    font-size:13px;
    padding-left: 5px;
    text-align: center;
    background-image: url("pool-water.jpg");




}





.redbtext {
    color: #a90000;
    font-weight:bold;
}

.greebtext {
    color: #39780a;
    font-weight:bold;
    font-size:14px;
}

.greebbullet {
    color: #39780a;
    font-size:13px;

}
.bluetext {
    color: #013370;
    font-weight:bold;
    font-size:15px;
}

nav {float: left;
width: 190px;
padding: 10px;
background-color: #ffff80;
}

nav a {text-decoration: none;
font-size: 1.5em;}

nav a:link {color:#blue;}

nav a:hover {color: orange;}

nav a:visited {color:#002266;}

li {list-style-type: none;}


main {margin-left: 210px;
background-color:#ffffcc;
height: 100%;
font-size: 1.1em;
color: grey;

padding-right: 200px;
}

#wrapper {width: 967px;
margin-left: auto;
margin-right: auto;
background-color: #ffff80;
overflow: hidden;


}

footer {text-align: center; 
padding: 20px;
}








#hp1, #hp2, #hp3 {border: 10px solid white;
float:right;}

最佳答案

如果您希望 3 个列的高度相同，您可以使用 supporting IE 10+ , flexbox 可以实现这个:https://codepen.io/pixleight/pen/RZgxYP/

#wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

header,
nav,
aside,
main,
footer {
  margin: 16px;
  padding: 16px;
  /* outline just for visibility purposes */
  outline: 1px solid #F0F;
}

header,
footer {
  -webkit-box-flex: 100%;
  -ms-flex: 100%;
  flex: 100%;
}

nav,
aside {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

main {
  -webkit-box-flex: 2;
  -ms-flex: 2;
  flex: 2;
}

<div id="wrapper">
  <header>
    <h1>Header</h1>
  </header>
  <nav>
    <ul>
      <li><a href="http://www.jlsc.org">Home</a></li>
      <li><a href="pool-info.htm">Pool Information</a></li>
      <li><a href="news-events.htm">News &amp; Events</a></li>
      <li><a href="swim-team.htm">Swim Team</a></li>
      <li><a href="swim-lessons.htm">Swim Lessons</a></li>
      <li><a href="jlsc-board.htm">JLSC Board </a></li>
      <li><a href="photo-gallery.htm">Photo Galleries</a></li>
      <li><a href="links-htm.htm">Useful Information</a></li>
    </ul>
  </nav>
  <main>
    <h2>Welcome to Juniper Lane Swim Club!</h1>
      <p>Juniper Lane is the neighborhood club where family fun is #1!</p>
      <p>Whether you're looking for a place to take the kids, swim a few laps <br> to stay in shape or just relax on a lounge chair with a good book - Juniper Lane is the place for you.</p>
      <!-- truncated for brevity -->
  </main>
  <aside>
    <h3>Aside</h3>
  </aside>
  <footer>
    <small><i>Copyright &copy; 2017 Juniper Lane Swim Club</i></small>
  </footer>
</div>

关于html - 如何使 <aside> 作为包含内容的列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45622792/

25

4

0

文章推荐： css - 网格 CSS 全宽列

文章推荐： javascript - 不认识这个功能

文章推荐： javascript - 如何使列表平滑过渡

文章推荐： javascript 换行符替换

html - 如何放置
元素 'aside' 主要内容
我一直在使用各种技术来尝试解决我遇到的这个问题。我正在创建另一个关于自助的实践网站(即无意发布)。我正在尝试放置一个侧边栏，其中包含历史上人们的名言。但是我的旁边元素(边栏)不会出现在主要内容旁边。
x86 - 英特尔处理器的 TLB ASID 标签中有多少位？以及如何处理 'ASID overflow' ？
根据一些操作系统教科书，为了更快的上下文切换，人们在TLB标签字段中为每个进程添加ASID，因此我们不需要在上下文切换中刷新整个TLB。我听说一些 ARM 处理器和 MIPS 处理器在 TLB 中确
html - 如何对齐 aside 内的 div 与 aside 的关系？
我的布局如下所示: https://imgur.com/Nc2QuRv 在 aside 里面有一个 div，我希望它相对于 aside 的边框对齐。但是，如果我设置任何边距或填充，整个旁边会相对于其上
html - 在
标签内添加
标签在语义上是否正确？
过去几天我一直在想这个问题，我想我应该在这个网站上注册，因为我正在寻找的大部分答案都来自这里。但是，我找不到这个答案。我只是想知道将 nav 标签嵌套在 aside 标签中在语义上是否正确？我是来自
html - 试图在图像旁边堆叠一个

所以我有一个 Article 标签，它基本上由一个超链接、一个图像、一个按钮和一个旁白组成。图像是内联渲染图像，旁边是堆叠的。为了能够做到这一点，这就是我正在做的: Title
html - Aside 元素到指定点之后
所以，顺便说一下，请看这里我的意思:http://ejfox.github.io/sStory/ 一篇文章，2 个 css 列，在第一列中我有带有文字和图片的文章，在第二列中我放置了元素。这些旁白元素
html - aside 不会漂浮在文章旁边
This image显示我的问题。 aside 元素在文章旁边有一个完美的空间。我想把它放在那里，但我不想使用相对位置，我只想使用 float 标签。我的理解是，所有内容都应该是一个 inline-
css - aside 元素的样式
我有以下 html5 代码。我希望文本 Business Ads 的样式为斜体且颜色为黄色。但它是红色的。只能将某些样式应用到 aside 元素吗？ CSS: aside h4 { fon
html -
标记在主要内容之前或之后
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
html5
标签
使用时HTML 5 中的标记，我们是否需要添加 float:right (或 left )它的属性？因为大多数时候，它被用作侧边栏，我想。这是个基本问题，但我只想找出正确的使用方法。最佳答案
html - 我可以为第二个侧边栏使用多个
标签吗？
我可以使用多个第二个侧边栏的标签？例子: (FIRST) (SECOND) [or ?] 最佳答案您可以 .尝试将其粘贴到 w3c 验证器的“直接输入”部分以供证明。您需要它是一个完整的
memory - 地址间隔标识符 (ASID) 的用途
我目前正在学习 A Silberschatz、P Galvin、G Gagne 的操作系统。我正在研究内存管理策略，以及他们介绍翻译后备缓冲区 (TLB) 的部分。 Some TLBs store
css - 我无法将
固定到与文章相同的高度
这个问题在这里已经有了答案: How to set a percentage height value in HTML/CSS (7 个答案) CSS - Equal Height Columns?
html - 如何使
作为包含内容的列
正如我的标题所述，我有一个网站，我试图将其基本上分为三栏。左边的第一列将包含栏，最大的列将是包含段落、图像等的中心内容区域... 然后对于最右边的列，我需要它是一个元素，它与其他列的高度相同，并且
css - HTML5 aside 元素未包装在包装器内
我不明白为什么 body wrap 元素不能正常工作。我不想添加额外的 div 并将其保留在该公式中。有什么想法吗？代码: body { backgr
javascript - bootstrap aside 在小型设备上隐藏分页元素
我有一个带有 DIV 和 Aside 的网页，在 DIV 中我有一个带有动态分页的列表，一切都很好，除了在小型设备中 Aside 掩盖了分页，我看不到第 2 页和第 3 页....DIV ....
html - Second Aside 不在页面顶部
我左边的第一个边工作得很好，但是，我右边的第二个边被压低了。如何让它像#aside1 和 Section 一样位于顶部？我从以前的工作任务中复制了这段代码。我错过了隐藏在编码中的东西吗？如果您需要查看
css - 网站页脚与
内容冲突
我在 Joomla 中建立了一个站点 Here's the site使用自定义网格响应模板。目前我有一个非常基本的布局......页眉 - 部分 - 旁边 - 页脚。然而，页脚似乎上升到 aside
html - 如何使用 'aside' 标签使垂直图像居中？
对于一项学校作业，我需要在我的 HTML 列表中有一个“aside”标签。我为此选择了一张图片，但现在该图片位于网站其余部分的上方。我希望它居中。我的洞网站是居中的，所以我在两边都有一个白色的垂直空间
html - 使
元素成为页面的特定部分？
基本上，我正在尝试制作一个包含 3 个部分的页面 - 一个 aside 元素、一个 div 元素(用于动画但不相关)和一个页脚。我希望它的布局方式是页面左上角的 aside 元素，以及其下方的黑色 d

首页

博学

6Ren·AI

商城

html - 如何使
作为包含内容的列

首页

博学

6Ren·AI

商城

html - 如何使 作为包含内容的列

html - 如何使
作为包含内容的列