Question 136845 in Html Question posted in
Some basic documentation can be found here.

Html – How can I have a paragraph-like display in css with different children inside a div

I currently have this:
expected

But I want to achieve this:
actual

Is there a way to do it by maintaining the same HTML structure?
Here’s the example code:

.container {
  display: flex;
  /* Makes the container an inline block element */
  vertical-align: top;
  /* Aligns the top edge of the container with the top edge of the previous element */
  width: 600px;
}

label {
  background-color: #8ff;
  display: inline-block;
  /* Makes the label element an inline block element */
}

.content-wrapper {
  background-color: #f8f;
  display: flex;
  /* Makes the content-wrapper an inline block element */
  flex-wrap: wrap;
  white-space: nowrap;
  /* Prevents the content from wrapping to the next line */
  overflow-x: auto;
  /* Allows horizontal scrolling if the content overflows */
}

span {
  display: inline-block;
  /* Makes the child elements inline block elements */
  margin-right: 10px;
  /* Add some spacing between the child elements */
}
<div class="container">
  <label>Label</label>
  <div class="content-wrapper">
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
  </div>
</div>

I tried using flex, grid but nothing works, it works with the label inside the div but I’d prefer not to use that approach or use it as very last resouce

Tags:

2

Answers


  1. 0

    Here’s a potential way using display: contents;

    .container {
  display: flex;
  width: 600px;
  flex-wrap: wrap;
  background-color: #f8f;
}

label {
  background-color: #8ff;
  display: inline-block;
}

.content-wrapper {
  display: contents;
}

span {
  display: inline-block;
  margin-right: 10px;
}
    <div class="container">
  <label>Label</label>
  <div class="content-wrapper">
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You don’t really need a lot of code for this. Simply make the wrapper an inline element.

    .container {
  background-color: #f8f;
  width: 600px;
}

label {
  background-color: #8ff; 
}

.content-wrapper {
  display: inline;
}

span {
  margin-right: 10px; /* Add some spacing between the child elements */
}
    <div class="container">
  <label>Label</label>
  <div class="content-wrapper">
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search