2

Buenas! ¿Como puedo hacer para que la segunda imagen este a la derecha?

Le puse una clase sola para ella que se llama derecha pero el problema que al darle float right, la página pierde su flujo y se amontonan unas sobre otras.

Simplemente quiero que la segunda, la imagen este al otro lado, es decir primero fondo rojo y a su derecha la imagen.

Saludos.

/*********************************************** PROYECTOS ************************/

.General-Proyectos {
  background-color: #e9e9e9;
}

.Proyectos {
  height: 800px;
  width: 75%;
  text-align: justify;
  margin: auto;
}

.Individual-Imagenes-Proyectos {
  height: 206px;
  width: 100%;
  background-color: #b00000;
  border-radius: 10px;
  margin: 20px;
}

.Imagenes-Proyectos img {
  height: 200px;
  width: auto;
  border: solid 3px;
  border-color: #b00000;
  border-radius: 10px;
  transition: opacity 0.3s;
}

.Imagenes-Proyectos img:hover {
  opacity: 0.9;
}

.Derecha {
  /* ????????????????????????? */
}
<div class="General General-Proyectos">
  <div class="Proyectos">
    <h2>Mis proyectos</h2>

    <div class="Imagenes-Proyectos">
      <div class="Individual-Imagenes-Proyectos">
        <img src="Img/inLaw.png" alt="inLaw Proyecto">
      </div>
      <div class="Individual-Imagenes-Proyectos Derecha">
        <img src="Img/inLaw.png" alt="inLaw Proyecto">
      </div>
      <div class="Individual-Imagenes-Proyectos">
        <img src="Img/inLaw.png" alt="inLaw Proyecto">
      </div>
    </div>

  </div>
</div>

introducir la descripción de la imagen aquí

3
  • 1
    la imagen a la derecha del fondo, pero sobre el fondo o fuera del fondo? es decir, lo quieres como en la captura?
    – GDP
    el 11 sep. 2017 a las 11:10
  • @GDP Lo quiero como en la captura pero con la de en medio en el lado derecho. Es decir sobre el fondo, pero a la derecha.
    – Lleims
    el 11 sep. 2017 a las 11:33
  • Mira la respuesta que te he dado entonces, creo que es la que te vale.
    – GDP
    el 11 sep. 2017 a las 11:34

2 respuestas 2

2

Puedes alinearla por css con la propiedad text-align

text-align: right;

OBSOLETO-> O en HTML con la propiedad align

align="right"

.General-Proyectos {
  background-color: #e9e9e9;
}

.Proyectos {
  height: 800px;
  width: 75%;
  text-align: justify;
  margin: auto;
}

.Individual-Imagenes-Proyectos {
  height: 206px;
  width: 100%;
  background-color: #b00000;
  border-radius: 10px;
  margin: 20px;
}

.Imagenes-Proyectos img {
  height: 200px;
  width: auto;
  border: solid 3px;
  border-color: #b00000;
  border-radius: 10px;
  transition: opacity 0.3s;
}

.Imagenes-Proyectos img:hover {
  opacity: 0.9;
}

.Derecha {
  text-align: right;
}
<div class="General General-Proyectos">
  <div class="Proyectos">
    <h2>Mis proyectos</h2>

    <div class="Imagenes-Proyectos">
      <div class="Individual-Imagenes-Proyectos">
        <img src="http://www.focolare.org/usa/files/2013/05/Law.jpg" alt="inLaw Proyecto" align="right">
      </div>
      <div class="Individual-Imagenes-Proyectos Derecha">
        <img src="http://www.focolare.org/usa/files/2013/05/Law.jpg" alt="inLaw Proyecto Derecha">
      </div>
      <div class="Individual-Imagenes-Proyectos">
        <img src="http://www.focolare.org/usa/files/2013/05/Law.jpg" alt="inLaw Proyecto" align="right">
      </div>
    </div>

  </div>
</div>

1
  • Por favor, no uses w3schools como referencia... porque te enseñan ejemplos con códigos obsoletos: align el 11 sep. 2017 a las 11:35
0

Puedes poner una fila row por cada fila que quieras realizar.

/*********************************************** PROYECTOS ************************/

.General-Proyectos {
  background-color: #e9e9e9;
}

.Proyectos {
  height: 800px;
  width: 75%;
  text-align: justify;
  margin: auto;
}

.Individual-Imagenes-Proyectos {
  height: 206px;
  width: 100%;
  background-color: #b00000;
  border-radius: 10px;
  margin: 20px;
}

.Imagenes-Proyectos img {
  height: 200px;
  width: auto;
  border: solid 3px;
  border-color: #b00000;
  border-radius: 10px;
  transition: opacity 0.3s;
}

.Imagenes-Proyectos img:hover {
  opacity: 0.9;
}

.Derecha {
  /* ????????????????????????? */
}

.row {
display:inline-table;
}
<div class="General General-Proyectos">
  <div class="Proyectos">
    <h2>Mis proyectos</h2>

    <div class="Imagenes-Proyectos">
    <div class="row">
      <div class="Individual-Imagenes-Proyectos">
        <img src="Img/inLaw.png" alt="inLaw Proyecto">
      </div>
      <div class="Individual-Imagenes-Proyectos Derecha">
        <img src="Img/inLaw.png" alt="inLaw Proyecto">
      </div>
      </div>
      <div class="row">
      <div class="Individual-Imagenes-Proyectos">
        <img src="Img/inLaw.png" alt="inLaw Proyecto">
      </div>
      </div>
    </div>

  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.