3 imágenes en la primera línea y luego 2 imágenes en la segunda línea debajo

Question

Quiero tener 3 imágenes en la primera línea y 2 en la segunda. Tengo este código pero tiene 2 en la parte superior y 3 en la parte inferior.

<ul>
  <li><img src="./icons/User_Management.png" /></li>
  <li><img src="./icons/User_Management.png" /></li>  
  <li><img src="./icons/User_Management.png" /></li>  
  <li><img src="./icons/User_Management.png" /></li>  
  <li><img src="./icons/User_Management.png" /></li>
</ul>

* { box-sizing: border-box; }
    ul { 
      list-style: none; 
      font-size: 0; 
      margin: 0; 
      padding: 0; 
      text-align: center; }

    li { display: inline-block; padding: 10px;}

    li:nth-child(1), li:nth-child(4) {
      width: 50%;
    }
    li:nth-child(4) { text-align: right; }
    li:nth-child(2) { text-align: left; }

Quiero que las dos imágenes inferiores se centren con las tres imágenes en la parte superior.

Resultado esperado: 3 imágenes en la primera fila y 2 en la segunda fila Resultado real: 2 imágenes en la primera fila y 3 en la segunda fila

html css

0

Bob Smith 16 oct. 2019 a las 18:22

Answer 1

Use Flex:

#container{
  width: 550px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#container > img{
  margin: 10px;
}

<div id="container">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
</div>

2

Laif 16 oct. 2019 a las 15:40

Answer 2

Así:

Simplemente ajuste los anchos y use el nth-child apropiado

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

ul {
  list-style: none;
  font-size: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}

li {
  display: inline-block;
  text-align: center;
  width: 33.3%;
  border: 1px solid red;
}

li:nth-child(4),
li:nth-child(5) {
  width: 50%;
}

<ul>
  <li><img src="http://www.fillmurray.com/140/100" /></li>
  <li><img src="http://www.fillmurray.com/140/100" /></li>
  <li><img src="http://www.fillmurray.com/140/100" /></li>
  <li><img src="http://www.fillmurray.com/140/100" /></li>
  <li><img src="http://www.fillmurray.com/140/100" /></li>
</ul>

0

Paulie_D 16 oct. 2019 a las 15:37

Answer 3

También podría hacer algo como esto, que es una herramienta CSS increíble. Usa la cuadrícula CSS.

//HTML
<ul class="grid">
  <li><img src="./icons/User_Management.png" /></li>
  <li><img src="./icons/User_Management.png" /></li>  
  <li><img src="./icons/User_Management.png" /></li>  
  <li><img src="./icons/User_Management.png" /></li>  
  <li><img src="./icons/User_Management.png" /></li>
</ul>

//CSS
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

0

MBri 16 oct. 2019 a las 15:30

3 imágenes en la primera línea y luego 2 imágenes en la segunda línea debajo

3 respuestas

Nuevas preguntas

html