place the image on the right

Question

place the image on the right

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

Good! How can I make the second image on the right?

I put a single class for her that is called derecha but the problem that when float right, the page loses its flow and are piled on top of each other.

I just want the second one, the image on the other side, that is, the red background first and the image on its right.

Greetings.

/*********************************************** 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>

css3 css

asked by NEA 11.09.2017 в 13:07

source

2 answers

0

You can put a row row for each row you want to make.

/*********************************************** 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>

answered by 11.09.2017 в 13:17

Post with Ajax always gives an error but it still works AdmiralCloack.lua: 54: 'then' expected near ')'

score 2 · Accepted Answer

You can align it by css with the property text-align

text-align: right;

OBSOLETE - > Or in HTML with the property 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>