Line-break after 3 images with css?

Question

I have six icons on my website. I want three of them to be on one line and the others on the second only when the media screen is 400px .
So I should do it with @media screen and (max-width: 400px) . But my main problem is that I dont know how to make the line break with 3 icons in the first line and the next three in the second line.

 .icon { display: inline-block; } #line-break {} 

 <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div id="line-break" class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> 

FIDDLE: https://jsfiddle.net/ayf8u5s9/

Answer 1

You can use float and clear within your

@media screen and (max-width: 400px)

@media query:

  .icon { display: inline-block; float: left; width: 24px; } .icon:nth-of-type(3n+1) { clear: left; } 

 <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div id="line-break" class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> 

Answer 2

You can insert a <br> tag after the third icon and hide it when the viewport is wider than 400px with this media query : @media screen and (min-width: 400px)

Demo :

 .icon { display: inline-block; } @media screen and (min-width: 400px) { br { display: none; } } 

 <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <br> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> 

Answer 3

Instead of display: inline-block , use float to line the div s up. Then on media query, clear the float on the line-break one.

.icon {
  float: left
}
@media screen and (max-width: 400px) {
    #line-break {
      clear: left;
    }   
}

Fiddle: https://jsfiddle.net/abhitalks/ayf8u5s9/2/

Snippet:

 .icon { float: left } @media screen and (max-width: 680px) { #line-break { clear: left; } } 

 <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div id="line-break" class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> 

Answer 4

try to put each 3 icon in one div then make these divs display: inline-block then when the media screen is 400px make it display: block

 .icon { display: inline-block; } .col1 { display: inline-block; } @media(max-width: 400px) { .col1 { display: block } } 

 <div class="col1"> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> </div> <div class="col1"> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> <div class="icon"> <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" /> </div> </div> 

Answer 5

.icon { width:auto; float:left }
.icon:nth-child(3n+1) { clear: both; }

Modify the styles as above. This will break to next line after every 3

Answer 6

将所有图标div放在一个主div中，然后在400px媒体屏幕中添加仅包含3个图标的类宽度，它会在下一行自动发送其他三个图标