I can't make <div> to sit next to each other [duplicate]-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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;

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

CodePudding user response：

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/