2

I want to make some div blocks to go right after the previous one, but here's what I get: instead of staying next to each other, each block starts from a new line.

div.change {
  width: 200px;
  height: 200px;
  background-color: green;
  display: inline-block
}

div.change.one {
  opacity: 0.7;
}

div.change.two {
  opacity: 0.5;
}

div.change.three {
  opacity: 0.3;
}

div p {
  text-align: center;
  padding: 80px 5px
}
<div class="change">
  <div class="change one">
    <p>here</p>
  </div>
  <div class="change two">
    <p>here</p>
  </div>
  <div class="change three">
    <p>here</p>
  </div>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Mary Ned
  • 21
  • 1
  • Please do some searching before asking. This is one of the most common questions on Stack Overflow and has been answered hundreds of times. – Heretic Monkey Sep 27 '21 at 21:21
  • 1
    @HereticMonkey, the answer has more to do with selectors and nesting. Granted, it can be indirectly solved via the dupe, but.... – isherwood Sep 27 '21 at 21:22

3 Answers3

1

You've set the size of the parent element and you've set it to to inline-block, but you need to set those properties on the children only. This is one of the hazards of using the same class for nested elements. You can clear things up with an explicit child selector.

div.change div.change {
  width: 150px;
  height: 150px;
  background-color: green;
  display: inline-block
}

div.change.one {
  opacity: 0.7;
}

div.change.two {
  opacity: 0.5;
}

div.change.three {
  opacity: 0.3;
}

div p {
  text-align: center;
  padding: 80px 5px
}
<div class="change">
  <div class="change one">
    <p>here</p>
  </div>
  <div class="change two">
    <p>here</p>
  </div>
  <div class="change three">
    <p>here</p>
  </div>
</div>

You could simplify things by removing the change class from the inner elements:

div.change > div {
  width: 150px;
  height: 150px;
  background-color: green;
  display: inline-block
}

div.change .one {
  opacity: 0.7;
}

div.change .two {
  opacity: 0.5;
}

div.change .three {
  opacity: 0.3;
}

div p {
  text-align: center;
  padding: 80px 5px
}
<div class="change">
  <div class="one">
    <p>here</p>
  </div>
  <div class="two">
    <p>here</p>
  </div>
  <div class="three">
    <p>here</p>
  </div>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
0

Because you are using display inline change the display to flex and they will be next to each other:

display: flex;

you can use this also:

flex-direction: row;

or

flex-direction: row-reverse;

and remove change class from childrens keep it only on the parent element. i'd suggest to check a flexbox css course or tutorial it's a very useful property in css

18jad
  • 413
  • 3
  • 8
  • This is not necessary. – isherwood Sep 27 '21 at 21:23
  • idk what you are talking about but flex is one of the best css property to set elements next to each other and in a row, there's other ways but it's the best – 18jad Sep 27 '21 at 21:26
  • No one said it wasn't. There's no need to refactor to solve this problem, though. Inline-block is perfectly valid and useful. – isherwood Sep 27 '21 at 21:27
  • inline block work but make your code messy and not good, you have to add it to each children and the row wrap when the screen is small.. helping him by improving the skills and let him learn better stuff not by making his code worse – 18jad Sep 27 '21 at 21:37
0

I think that your problem is that you are set 200px width to both container and the inner divs via the 'change' class.

Try to set proper wodth to the container element, or use flexbox:

Setting display: flex; in the container div should work (but give it a new class name, don't use 'change' since you use it for the inner divs as well, and this settings is relevant just for the container).

Try to set some different and suitable width to the container in a new class name or other unique selcetor (600px should work).

If you want to know more about flexbox use this:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Chenga
  • 60
  • 2