rozmieszczenie elementow div

Question

<section id="skill">
			<div class="container">
				<p>Co możemy dla Was zrobić.</p>
				<div class="icon">
					<img src="img/docieplenia_elewacji.png" alt="doceplenia elewacji">
					<p>docieplenia elewacji</p>
				</div>
				<div class="icon">
					<img src="img/dachy.png" alt="dachy">
					<p>dachy</p>
				</div>
				<div class="icon">
					<img src="img/tynki.png" alt="tynki">
					<p>tynki</p>
				</div>
				<div class="icon">
					<img src="img/instalacje_elektryczne.png" alt="instalacje elektryczne">
					<p>instalacje elektryczne</p>
				</div>
				<div class="icon">
					<img src="img/gladzie.png" alt="gładzie">
					<p>gładzie</p>
				</div>
				<div class="icon">
					<img src="img/remonty.png" alt="remonty">
					<p>remonty</p>
				</div>
				<div class="icon">
					<img src="img/wykonczenia_wnetrz.png" alt="wykończenia wnętrz">
					<p>wykończenia wnętrz</p>
				</div>
				<div class="icon">
					<img src="img/plytki.png" alt="płytki">
					<p>płytki</p>
				</div>
				<div style="clear:both"></div>
			</div>
		</section>

#skill
{
	margin:0;
	padding:0;
	background-color:#f0f3f2;
}

#skill > .container > p
{
	margin:0;
	padding:80px 0;
	font-size:30pt;
	font-weight:300;
	color:#454545;
	text-align:center;
}

.icon
{
	width:33.3%;
	margin:0;
	padding:0;
	float:left;
	text-align:center;
}

#skill > .container > .icon > img
{
	margin:0;
	padding:0;
	text-align:center;
}

#skill > .container > .icon > p
{
	margin:0;
	padding:0;
	text-align:center;
}

Problem wygląda tak że chciałbym aby moje 8 elementów div układało się w dwóch rzędach po 4 więc naturalną koleją rzeczy byłoby ustawić width:25%; Niestety układa się tak jak na obrazku czyli w 3 rzędach. Dodam że przy width:33.3%; jest tak jak powinno być z matematycznych obliczeń.

Answer 1

Proszę - https://jsfiddle.net/b2khxdLs/1/

Czysty flexbox :)

Comments

Dzięki serdeczne!

Answer 2

Witam. To idealny układ żeby zastosować grid :) zaczerpnięte ze znienawidzonego https://www.w3schools.com

 <div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-3">...</div> <!-- 25% -->
</div>
 <div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-3">...</div> <!-- 25% -->
</div>

* {
    box-sizing: border-box;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}