Home>

I had been thinking and making mistakes while searching past questions and online, but it didn't work, so I would like to ask you a question.
I used flex at first because it was side by side, but it didn't work as I expected, so I tried it with float, but I wasn't satisfied with it either. Thanks for your cooperation.

code

<p>   p>


<p></p>


<p></p>
.sample1 img {
    height: auto;
    width: 30%;
    margin-top: 10px;
.sample2 img {
    height: auto;
    width: 35%;
}
.sample3 img {
    height: auto;
    width: 40%;
}
.carcos {
    float: left;
    width: 33%
}
  • Answer # 1

    .sample1 img {Close}Isn't it, but does the actual code look like this?
    Unless it is a mistake when posting

    .sample1 img {
        height: auto;
        width: 30%;
        margin-top: 10px;
    }/* Add this * /
    .sample2 img {
    / * Omitted below * /


    Let's say.

    I think that the images themselves are now side by side,floatPlease note that it is necessary to clear the wraparound when using.


    flexIf you use carcosdivEnclose it with, etc.display: flex;Let's specify.

    
      
      <p></p>
      
      
      <p></p>
      
      
      <p></p>
      
    
    .sample1 img {
      height: auto;
      width: 30%;
      margin-top: 10px;
    }
    .sample2 img {
      height: auto;
      width: 35%;
    }
    .sample3 img {
      height: auto;
      width: 40%;
    }
    .carcos-container {
      display: flex;
    }
    .carcos {
      width: 33%;
      width: calc (100%/3);
    }


    Sample when using flexbox (code above)
    Should be like this

    Please adjust the detailed settings by referring to the following.
    Japanese support! I made a CSS Flexbox cheat sheet and will distribute it | Web Creator Box