时间戳

首页 > 解决方案 > 无法对齐

html - 无法对齐

问题描述

tldr;我正在尝试将备用部分放在文章部分的左侧（例如，sidebar/sidecolumn但是我的“浮动”似乎根本不起作用。如何在不编辑 HTML 代码的情况下执行此操作？我只想编辑它在 CSS 文件中。我是初学者，非常感谢您的帮助！

* {
box-sizing: border-box;
}
section {background-color: cornsilk;overflow:auto;float: right;}
article {color: black;float: right;}
article footer {font-style: italic;font-size: 15px;color: black; background-color: cornsilk;text-align: left;}
#wrapper {width: 960px;
margin: 0 auto;}

h1 {
background-color: #666;

text-align: center;
font-size: 35px;
color: white;
}
footer {
background-color: #666;

text-align: center;
font-size: 35px;
color: white;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
float: right;

}
aside { 
float: left;

}
<div id="wrapper">
  <header><h1>text</h1></header>
  <article>
    <section>
      <header><h2>Om CSS</h2></header>
      <p>text</p> 
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/Cascading_Style_Sheets"> artikel om CSS</a> på Wikipedia</p>
      <footer>text</footer>     
    </section>
    <section>
      <header><h2>Om märkspråk</h2></header>
      <p>text</p> 
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/HTML5"> artikel om HTML5</a> på Wikipedia</p>
      <footer>text</footer>     
    </section>
  </article>

  <aside> 
    <h1>Bildgalleri</h1>
    <img src="images/html5.png " alt="html5">
    <img src="images/css.png" alt="css3">
  </aside>
  <footer>&#169;</footer>
</div>

标签： htmlcss

解决方案

这是一个您的 HTML 完全不变的解决方案（实际上我根本不建议这样做，因为其中的元素顺序并不理想，一般的 HTML 结构也不理想）。

主要的是我在页眉和页脚上使用了display: flex with并应用于页眉和页脚，加上其他元素上的一些填充和边距，为页眉和页脚创建空间。我还删除了所有花车。其他详细信息/设置见下文。flex-direction: row-reverse#wrapperposition: absolute

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
}
#wrapper {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  position: relative;
}
section {
  background-color: cornsilk;
  padding-bottom: 50px;
}

article {
  color: black;
  padding: 60px 0;
}

article footer {
  font-style: italic;
  font-size: 15px;
  color: black;
  background-color: cornsilk;
  text-align: left;
}

header h1 {
  background-color: #666;
  text-align: center;
  font-size: 35px;
  color: white;
  margin: 0;
}
aside h1 {
  margin-top: 60px;
  margin-right: 20px;
}
#wrapper > header {
  position: absolute;
  width: 100%;
  height: 40px;
  margin-right: 20px;
}
section:first-of-type > header {
   margin-top: 40px;
}
footer {
  background-color: #666;
  text-align: center;
  font-size: 35px;
  color: white;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
<div id="wrapper">
  <header>
    <h1>text</h1>
  </header>
  <article>
    <section>
      <header>
        <h2>Om CSS</h2>
      </header>
      <p>text</p>
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/Cascading_Style_Sheets"> artikel om CSS</a> på Wikipedia</p>
      <footer>text</footer>
    </section>
    <section>
      <header>
        <h2>Om märkspråk</h2>
      </header>
      <p>text</p>
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/HTML5"> artikel om HTML5</a> på Wikipedia</p>
      <footer>text</footer>
    </section>
  </article>

  <aside>
    <h1>Bildgalleri</h1>
    <img src="images/html5.png " alt="html5">
    <img src="images/css.png" alt="css3">
  </aside>
  <footer>&#169;</footer>
</div>

推荐阅读