0

estoy haciendo un display para videos pero no puedo modificarlo correctamente

para que lusca como este imagen:

introducir la descripción de la imagen aquí

pero solamente me aparece como esta imagen:

introducir la descripción de la imagen aquí

este es el codigo:

css:

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}

html:

  <div>
    <div class="polaroid">
      <img src="rock600x400.jpg" alt="Norway" style="width:100%">
      <div class="container">
        <p>The Troll's tongue in Hardanger, Norway</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="lights600x400.jpg" alt="Norway" style="width:100%">
      <div class="container">
        <p>Northern Lights in Norway</p>
      </div>
    </div>
</div>

realmente agradecere si pueden ayudarme con esta situacion.

2
  • Estas usando Bootstrap? Si no, ese puede ayudar en esas cosas
    – Simon
    el 22 jun. 2017 a las 20:49
  • No, es css puro y silvestre el 22 jun. 2017 a las 21:06

3 respuestas 3

2

Aquí te dejo el código mas o menos con la organización que quieres, con la imagen a un lado y los textos al otro. Para poder organizarlo así necesitas usar el atributo "position: absolute" para poder colocar el objeto en una determinada posición como es a la izquierda(en el caso del texto).

Ahora solo tienes que cambiar varias cosas como el tamaño de la etiqueta para que se adapte al estilo que deseas.

div.polaroid {
  width: 350px;
  height: 120px;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
 
  position: relative;
}
div.polaroid>img{
 
  width: 50%;
  height: 100%;
  display:inline;
  
}
div.container {
  position: absolute;
  right: 0px;
  width: 50%;
  height: 100%;
  text-align: center;
  vertical-align:middle;
  display:inline;
}
 <div>
    <div class="polaroid">
      <img src="http://www.lowcountryren.com/nestor/Documentation/ionicons-1.4.1/png/512/android-contact.png" alt="Norway">
      <div class="container">
        <p>The Troll's tongue in Hardanger, Norway</p>
      </div>
    </div>

    <div class="polaroid">
      <img src="http://www.lowcountryren.com/nestor/Documentation/ionicons-1.4.1/png/512/android-contact.png" alt="Norway">
      <div class="container">
        <p>Northern Lights in Norway</p>
      </div>
    </div>
</div>

1

Lo podrias hacer tambien con un con la propiedad float La caja imagen y container estan dentro la caja polaroid, flotas la caja imagen à la izqurda y la las una anchura del 30% à la caja container el 70%

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  overflow: hidden;
}

div.container {
  text-align: center;
  padding: 10px 20px;
  width: 70%;
  
}

.imagen {
  width: 30%;
  float: left;
}
.limpiar {
  clear: both;
}
<div>
  <div class="polaroid">
    <div class="imagen">
      <img src="http://lorempixel.com/600/400/" alt="Norway" style="width:100%">
    </div>
    <div class="container">
      <p>The Troll's tongue in Hardanger, Norway1</p>
    </div>
  </div>
<div class="limpiar"></div>
  <div class="polaroid">
    <div class="imagen">
      <img src="http://lorempixel.com/600/400/" alt="Norway" style="width:100%">
    </div>
    <div class="container">
      <p>Northern Lights in Norway2</p>
    </div>
  </div>
</div>

1

Usando Flexbox

Simplemente basta darle un flex-basis a la imagen y que el .container ocupe el resto.

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 5px;
}

.grid .polaroid {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .15), 0 -1px 1px 0 rgba(0, 0, 0, .05);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 150px;
  margin: 5px;
  padding: 0 5px;
  width: 425px;
}

.grid .polaroid img {
  border-radius: 3px;
  height: 90px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 140px;
  flex: 0 0 140px;
  margin: 0 5px;
}

.grid .polaroid .container {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 90px;
  margin: 0 5px;
  min-width: 0px;
}

.grid .polaroid .container h4 {
  color: #555;
  display: block;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25px;
  flex: 0 0 25px;
  font-family: 'Ubuntu', 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px 0;
  text-overflow: ellipsis;
  width: 100%;
}

.grid .polaroid .container pre,
.grid .polaroid .container p {
  display: -webkit-box;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-family: 'Ubuntu', 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 15px;
  padding-top: 5px;
  white-space: pre-line;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
<section class="grid">
  <div class="polaroid">
    <img src="https://www.mclanfranconi.com/wp-content/uploads/Consejos-para-tener-buenas-reuniones.jpg" alt="Norway">
    <div class="container">
      <h4>The Troll's tongue in Hardanger, Norway</h4>
      <pre>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates harum porro sed nisi illo reprehenderit, distinctio laboriosam dicta quaerat ipsam amet excepturi, consequatur delectus dolore architecto tempore ipsum. Molestiae, velit.
        </pre>
    </div>
  </div>

  <div class="polaroid">
    <img src="http://www.coffice.do/wp-content/uploads/2016/07/reuniones.jpg" alt="Norway">
    <div class="container">
      <h4>Northern Lights in Norway</h4>
      <pre>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem at pariatur iusto adipisci corporis, unde, nam dignissimos rerum impedit maiores illo distinctio veritatis quod, modi officia ab vero, reiciendis beatae!
        </pre>
    </div>
  </div>
</section>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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