Question

所以我在尝试将侧面高度固定为与我的文章课相同时遇到麻烦，但是我没有找到一个可以解决我的问题的高度？我尝试将right设置为0，但这只是在article标签和aside标签之间造成了差距。我该如何解决？

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

article {
  float: left;
  width: 60%;
  padding: 20px auto;
  background-color: grey;
}

aside {
  float: right;
  width: 40%;
  height: 100%;
  padding: 20px auto;

  background-color: lightgrey;
  border-left: 3px solid black;
}

<article>
   <section>
    <header><h2>Om CSS</h2></header>
    
    <p>
    Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem  ipsum     har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal     bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum     har inte bara överlevt fem århundraden, utan även övergången till elektronisk       typografi utan större förändringar. Det blev allmänt känt på 1960-talet i           samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare     med mjukvaror som Aldus PageMaker.
    </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>
        
   </section>
  </article>

<aside>
	<h1>Bildgalleri</h1>
  <img src="images/html5.png " alt="html5">
  <img src="images/css.png"   alt="css3">
</aside>

Answer 1

您可以使用(doall (filter ...。

flexbox也没有padding属性。

auto

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.flexbox {
  display: flex;
  flex-flow: row;
}

article {
  flex: 0 0 60%;
  padding: 20px 0;
  background-color: grey;
}

aside {
  flex: 0 0 40%;
  padding: 20px 0;
  background-color: lightgrey;
  border-left: 3px solid black;
}

Answer 2

您可以使用CSS flexbox

实现此目的

这是使用flex

更新的小提琴

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100%;
}

article {
  float: left;
  width: 60%;
  padding: 20px auto;
  background-color: grey;
}

aside {
  float: right;
  width: 40%;
  padding: 20px auto;
  background-color: lightgrey;
  border-left: 3px solid black;
}

<div class="container">
  <article>
    <section>
      <header>
        <h2>Om CSS</h2>
      </header>

      <p>
        Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara
        överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.
      </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>

    </section>
  </article>

  <aside>
    <h1>Bildgalleri</h1>
    <img src="images/html5.png " alt="html5">
    <img src="images/css.png" alt="css3">
  </aside>
</div>

我无法将<aside>固定为与文章相同的高度

2 个答案: