HTML and CSS Flexbox-CodePudding

The following is the given html code and I am not allowed to alter it by any means

#exceriseHead {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 50px;
  font-weight: bold;
  border: 1px solid black;
  background-color: greenyellow;
  text-align: center;
  color: black;
}

body {
  color: gainsboro;
  text-align: center;
}

p {
  color: black
}

.exEnumeration {
  color: green;
}

#exceriseFooter {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  border: 1px solid black;
  background-color: greenyellow;
  text-align: center;
  color: black;
}

.contentcolumnContent {
  display: flex;
}

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Abgabeseite 3</title>
  <link rel="stylesheet" href="cssaufgabe2.css">
  <!-- TODO: Import der CSS Datei -->

</head>

<body>

  <h1>Übungsblatt 4</h1>

  <div id="exceriseHead">
    Aufgabe 3
  </div>





  <div >
    <div >

      <div >
        <h1>a.)</h1>
      </div>
      <div>
        <!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br>          eu imperdiet leo, vel ultrices quam.</p>
      </div>

    </div>

    <div >

      <div >
        <h1>b.)</h1>
      </div>
      <div>
        <!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. <span >Nam ut lacinia<br> elit. </span> Fusce dictum lorem purus, a ullamcorper dolor<br> dictum eu. Proin a sapien ut mauris egestas
          fringilla eu eu<br> magna. Ut eu imperdiet leo, vel ultrices quam.</p>
      </div>
    </div>

    <div >
      <div >
        <h1>c.)</h1>
      </div>
      <div>
        <!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br>          eu imperdiet leo, vel ultrices quam.</p>
      </div>
    </div>
  </div>







  <div id="exceriseFooter">
    [Gruppenbezeichnung]
  </div>

</body>

</html>

This is how it looks

This is how it should look like

Hi, I got an assignment to write a css sheet in order to make a given html page look like the image below. However I can't figure out, how to put the enumerations ( a.), b.)and c.)) in front of the text. I hope you can help me :(

CodePudding user response：

The work is almost done: for the .exercisePart elements you need to set flex-grow and flex-shrink to 1. display: flex and align-items: center so the letter and the text can be side by side

A small gap to the outer flexbox container may improve readability.

#exceriseHead {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 50px;
  font-weight: bold;
  border: 1px solid black;
  background-color: greenyellow;
  text-align: center;
  color: black;
}

body {
  color: gainsboro;
  text-align: center;
}

p {
  color: black
}

.exEnumeration {
  color: green;
}

#exceriseFooter {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  border: 1px solid black;
  background-color: greenyellow;
  text-align: center;
  color: black;
}

.contentcolumnContent {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.exercisePart {
  flex: 1 1 auto;
  display: flex;
  gap: .25rem;
  align-items: center;
 }

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Abgabeseite 3</title>
  <link rel="stylesheet" href="cssaufgabe2.css">
  <!-- TODO: Import der CSS Datei -->

</head>

<body>

  <h1>Übungsblatt 4</h1>

  <div id="exceriseHead">
    Aufgabe 3
  </div>





  <div >
    <div >

      <div >
        <h1>a.)</h1>
      </div>
      <div>
        <!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br>          eu imperdiet leo, vel ultrices quam.</p>
      </div>

    </div>

    <div >

      <div >
        <h1>b.)</h1>
      </div>
      <div>
        <!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. <span >Nam ut lacinia<br> elit. </span> Fusce dictum lorem purus, a ullamcorper dolor<br> dictum eu. Proin a sapien ut mauris egestas
          fringilla eu eu<br> magna. Ut eu imperdiet leo, vel ultrices quam.</p>
      </div>
    </div>

    <div >
      <div >
        <h1>c.)</h1>
      </div>
      <div>
        <!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br>          eu imperdiet leo, vel ultrices quam.</p>
      </div>
    </div>
  </div>







  <div id="exceriseFooter">
    [Gruppenbezeichnung]
  </div>

</body>

</html>

CodePudding user response：

The .exerciseParts contain two <div>s, which by default have display: block, meaning they take all the width they can from their container, thus stacking vertically.

In order to change that, you can make the .exercisePart flexbox containers:

.exercisePart {
    display: flex;
}

That way by default all their children will stack horizontally and try and take the right amount of space.