Align texts in a row with CSS file-CodePudding

I wanna allign these text boxes in a row with css modification.

its only allowed to arrange the hmtl stuff with css.

here is my html file code:

#ueberschrift {
  text-align: center;
  padding: 7px;
}

#ueberschrift2 {
  text-align: center;
  background-color: rgb(150, 218, 150);
  border-style: solid;
  font-size: large;
  font-weight: 900;
}

#aText {
  font-size: small;
  padding: 10px;
  border: 2px solid;
  width: 30%;
}

#bText {
  font-size: small;
  padding: 10px;
  border: 2px solid;
  width: 30%;
}

#cText {
  font-size: small;
  padding: 10px;
  border: 2px solid;
  width: 30%;
}

#exceriseFooter {
  text-align: center;
  background-color: rgb(150, 218, 150);
  border-style: solid;
  font-size: large;
  font-weight: 900;
}

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Abgabeseite 3</title>

  <link rel="stylesheet" href="styling.css">

</head>

<body>
  <p id=aText> a)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit. Fusce dictum lorem purus, a ullamcorper dolor dictum eu. Proin a sapien ut mauris egestas fringilla eu eu magna. Ut eu imperdiet leo,
    vel ultrices quam.</pre>


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

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

</body>

</html>

I don know thy these text boxes not arranged in a row. please help.

CodePudding user response：

To arrange the text boxes in a row you need to put a "text-Wrapper" around them, like this:

 <div id="text-Wrapper">  <p id ="aText"> a)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque aliquet imperdiet. Nam ut
      lacinia elit. Fusce dictum lorem purus, a ullamcorper dolor dictum eu. Proin a sapien ut mauris egestas
      fringilla eu eu magna. Ut eu imperdiet leo, vel ultrices quam.</pre>
   

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

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

And in CSS you just need to set the display to flex like this:

#text-Wrapper{
display:flex;
}

This Worked for me.

You can also use "flex-direction" to arrange the boxes as you like. This might help you: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CodePudding user response：

I fixed a few basic syntax errors in your html and added display: flex to the body:

Originally your question showed <p id = a Text>. I see now it is edited to <p id = aText> but there is still no quotes around the aText which works in the snippet but I would use the quotes as it is at least symantically correct. EDIT: The quotes are not required when using html5.

Your first <p> tag is closed with a </pre> tag.

body {
  display: flex;
}

#ueberschrift {
  text-align: center;
  padding: 7px;
}

#ueberschrift2 {
  text-align: center;
  background-color: rgb(150, 218, 150);
  border-style: solid;
  font-size: large;
  font-weight: 900;
}

#aText {
  font-size: small;
  padding: 10px;
  border: 2px solid;
  width: 30%;
}

#bText {
  font-size: small;
  padding: 10px;
  border: 2px solid;
  width: 30%;
}

#cText {
  font-size: small;
  padding: 10px;
  border: 2px solid;
  width: 30%;
}

#exceriseFooter {
  text-align: center;
  background-color: rgb(150, 218, 150);
  border-style: solid;
  font-size: large;
  font-weight: 900;
}

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Abgabeseite 3</title>

  <link rel="stylesheet" href="styling.css">

</head>

<body>
  <p id="aText"> a)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit. Fusce dictum lorem purus, a ullamcorper dolor dictum eu. Proin a sapien ut mauris egestas fringilla eu eu magna. Ut eu imperdiet leo,
    vel ultrices quam.</p>


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

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

</body>