Witam,
próbuje ogarnąć "flex'a" i wszystko byłoby ok, żeby nie Chrome. W Firefox wszystko wyświetla tak jak trzeba, natomiast w Chromie, ostatnia grafika w pierwszym rzędzie przeskakuje poziom niżej.
Powinno być:
a jest:
HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="keywords" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="offert" class="content clear_margin">
<div class="offert center">
<div class="offert_content">
<img class="main_offert" id="caseih" src="https://t4st.000webhostapp.com/img/sales/offert/logos/caseih.png" />
<img class="main_offert" id="steyr" src="https://t4st.000webhostapp.com/img/sales/offert/logos/steyr.png" />
<img class="main_offert" id="manitou" src="https://t4st.000webhostapp.com/img/sales/offert/logos/manitou.png" />
<a class="sub_offert" href="https://lemken.com/pl/" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/lemken.svg" />
</a>
<a class="sub_offert" href="https://www.poettinger.at/pl_pl/" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/pottinger.png" />
</a>
<a class="sub_offert" href="https://www.uniamachines.com/pl/" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/unia.svg" />
</a>
<a class="sub_offert" href="https://www.stoll-germany.com/pl/" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/stoll.svg" />
</a>
<a class="sub_offert" href="https://wielton.com.pl/#" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/wielton.png" />
</a>
<a class="sub_offert" href="http://www.kongskilde.com/pl/pl-PL/Agriculture" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/kongskilde.png" />
</a>
<a class="sub_offert" href="https://www.pomot.pl/pl/" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/pomot.png" />
</a>
<a class="sub_offert" href="http://www.metaltech.com.pl/" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/metaltech.png" />
</a>
<a class="sub_offert" href="https://mrol.com.pl/" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/m-rol.png" />
</a>
<a class="sub_offert" href="https://www.expom.com.pl/" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/ex-pom.png" />
</a>
<a class="sub_offert" href="https://sonarol.pl/" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/sonarol.png" />
</a>
<a class="sub_offert" href="http://metal-technik.eu/en/home/" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/metal-technik.png" />
</a>
<a class="sub_offert" href="https://camarapolska.pl/" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/camara.png" />
</a>
<a class="sub_offert" href="https://sumeramotor.pl/" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/sumera.png" />
</a>
<a class="sub_offert" href="http://www.dozamech.pl/" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/dozamech.png" />
</a>
<a class="sub_offert" href="http://pom.com.pl/" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/pom.png" />
</a>
<a class="sub_offert" href="https://www.hydrac.com/" target="_blank">
<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/hydrac.png" />
</a>
</div>
</div>
</div>
</body>
</html>
CSS:
#offert
{
margin:0 auto;
width:1360px;
}
.offert
{
background-color:#DED6D9;
padding:1%;
}
.offert_content
{
display:flex;
justify-content:center;
flex-wrap:wrap;
}
.offert_content img:hover
{
-ms-transform:scale(1.1,1.1);
-webkit-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
}
.main_offert
{
flex:0 0 30%;
margin:0.5% 0.5% 5% 0.5%;
max-height:170px;
}
.main_offert img
{
height:100%;
width:100%;
}
#manitou img
{
height:100%;
width:100%;
}
.sub_offert
{
flex:0 0 16%;
margin:2%;
max-height:75px;
}
.sub_offert img
{
height:100%;
width:100%;
}
Gdzie robię błąd?
Z góry dzięki.
Pozdrawiam.