2.8 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d7791367417b2b2512ab4	Die Breite eines Elements mithilfe der width-Eigenschaft anpassen	0	https://scrimba.com/c/cvVLPtN	301039	adjust-the-width-of-an-element-using-the-width-property

--description--

Man kann die Breite eines Elements in CSS mit der width-Eigenschaft festlegen. Werte können in relativen Längeneinheiten (z. B. em), absoluten Längeneinheiten (z. B. px) oder als Prozentsatz seines übergeordneten Elements angegeben werden. Hier ein Beispiel, in dem die Breite eines Bildes auf 220px geändert wird:

img {
  width: 220px;
}

--instructions--

Füge der Karte eine width-Eigenschaft hinzu und setzte den Wert der Gesamtbreite auf 245px. Verwende die fullCard (dt. ganze Karte) Klasse, um das Element auszuwählen.

--hints--

Dein Code sollte die width-Eigenschaft der Karte auf 245px ändern, indem du den fullCard-Klassenselektor verwendest.

const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g);
assert(
  fullCard &&
    /width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) &&
    $('.fullCard').css('maxWidth') === 'none'
);

--seed--

--seed-contents--

<style>
  h4 {
    text-align: center;
  }
  p {
    text-align: justify;
  }
  .links {
    margin-right: 20px;
    text-align: left;
  }
  .fullCard {

    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Google</h4>
      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

--solutions--

<style>
  h4 {
    text-align: center;
  }
  p {
    text-align: justify;
  }
  .links {
    margin-right: 20px;
    text-align: left;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Google</h4>
      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

2.8 KiB Raw Blame History