javascript - para - ejemplos de paginas web en html5 y css3 codigo

Trucos avanzados de CSS: ¿cómo expandir una imagen sobre múltiples columnas en un diseño de sitio CSS3?

Question

Dado : Un diseño básico de cuatro columnas con un párrafo de texto continuo simple, junto con una sola fotografía que abarca tres columnas, alineadas arriba a la derecha. Ahora, ¿cómo podemos abarcar elegantemente nuestra imagen en las últimas tres columnas en html / css3 / js para que nuestro texto fluya automáticamente alrededor de la imagen?

.

.

.quatroColumns{}             /* css multi column 4 columns */
.imageSpanning2Columns{}     /* align to top-right */
.imageSpanning3Columns{}     /* align to top-right */
.imageDescription{}          /* description box over image */

http://jsfiddle.net/Vbr9d/205/ ( un dolor para encontrar dónde debería ir la imagen: ¡no es simple y no es un comienzo elegante! )
http://jsfiddle.net/Vbr9d/206/ (se ve feo, pero el HTML comienza a separar elegantemente la imagen y el texto ).

Olvídese de las versiones anteriores del navegador, excepto de las principales actuales Firefox InternetExplorer Chrome Safari. Cualquier idea, instrucciones o experimentos son bienvenidos. También son bienvenidas las pruebas alternativas de JavaScript para dividir el texto del párrafo en diferentes divs automágicamente, pero SOLO SI ASEGÚRESE DE QUE CSS NO ESTARÁ MADURADO PARA ESTE TIPO DE DISEÑO BÁSICO HASTA EL AÑO 2050.

Answer 1

Hola: Por favor encuentra un ejemplo de mi respuesta HERE

CÓDIGO HTML

<div id="news_paper">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
    </p>
    <img id="news_paper_image" src="http://lorempixel.com/600/275/">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>   
</div>

CÓDIGO CSS

#news_paper{
  margin: 7rem auto;
  width: 70%;
}

#news_paper > p{
  width: 22%;
  float: left;
  padding: 1%;
  text-align: justify;
}

#news_paper > p:first-child{
  margin-top: -1rem;
}

p{
  font-family:sans-serif;
}
#news_paper > p:first-child::first-letter{
  font-size: 2.5rem;
  color: whitesmoke;
  float: left;
  margin-top: -0.25rem;
  padding: 0 0.25rem 0.25rem;
  background-color: tomato;
}

#news_paper_image{
  width: 70%;
  float: left;
  margin-left: 1%;
}

GRACIAS T04435

Answer 2

Creo que dividir el texto en dos bloques es actualmente la única solución. Básicamente, se flota la imagen a la derecha, se coloca una primera columna de diferencia simple con el primer texto junto a ella y luego se coloca una segunda diferencia de cuatro columnas con el texto restante debajo de ella.

Esta solución funciona en Firefox.

HTML:

<div>
    <img src="http://www.robfraser-photographer.co.uk/wp-content/uploads/2012/07/SHOT-9.jpg" class="imageSpanning3Columns"/>
</div>
<div>
    <p class="singleColumns border">Het was 17 graden onder nul toen het ijs onder onze benen begon te kraken. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum iriure dolor in hendrerit in </p>
</div>
<div>
    <p class="quatroColumns border">vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim ass.

CSS:

.quatroColumns{             /* css multi column 4 columns */
    -webkit-column-count: 4; -webkit-column-gap: 20px; /* Chrome, Safari, Opera */   
    -moz-column-count: 4; -moz-column-gap: 20px; /* Firefox */
    column-count: 4; column-gap: 20px;
    width: 860px;
    font-size: 15px;
    text-align: justify;
}

.singleColumns{             /* css multi column 4 columns */
    -webkit-column-count: 1; -webkit-column-gap: 20px; /* Chrome, Safari, Opera */   
    -moz-column-count: 1; -moz-column-gap: 20px; /* Firefox */
    column-count: 1; column-gap: 20px;
    width: 198px;
    font-size: 15px;
    text-align: justify;
}

.singleColumns:first-child:first-letter {
    float: left; font-size: 67px; margin:  7px 5px -10px 20px;
}

.imageSpanning3Columns{     /* align to top-right */
    width:640px;
    top: 0 px;
    float:right;
}

.border{
    border: solid 0px;
    margin: 0px;
}

Aquí hay un violín con un ejemplo: http://jsfiddle.net/1ye9tyhq/

Answer 3

Esta es una solución limpia que debería funcionar en todos los principales navegadores. Se retransmite en una imagen de posición absoluta en lugar de usar el intervalo de columnas, ya que Firefox aún no lo admite.

/* Just to make it look a little nicer */
body {
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  padding: 1em;
}


article {
  /* We''re giving our article a max-width. This isn''t needed if a parent already does this.*/
  max-width: 860px;
  
  /* Create a 4 column layout */
  -webkit-column-count: 4;
     -moz-column-count: 4;
     column-count: 4;

  /* Give each column a little added spacing */
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
     column-gap: 20px;
     
  /* To be able to absolute position the image we need to give the parent a position */
  position: relative;
  
  /* This pulls up the first column of text to align with the image */
  padding-top: 225px;
}

article img {
  /* Absolute position our image */
  position: absolute;

  /* Place it in the top right cornet */
  top: 0;
  right: 0;

  /* Give it a height of 200px, this can of course be change if needed. If you update the height here make sure you also change the padding-top of the article and the negative margin later down. */
  height: 200px;
  
  /* We only want the image to spread 3 columns in width, that''s 75% of the entire width. We also use 10px (half of the column-gap). */
  width: calc(75% - 10px);

}

/* Give the first paragraph a negative margin to pull it back up. (right now we''re only using one parapgrah but if you''d want more in the future lets be specific here) */
article p:first-of-type {
  margin-top: -225px;
}

/* Some media queries to make it look nice on all resolutions */
@media screen and (max-width: 800px) {
  article {
    padding-top: 0;
    -webkit-column-count: 2;
       -moz-column-count: 2;
       column-count: 2;
  }
  article p:first-of-type {
    margin-top: 0;
  }
  article img {
    position: static;
    margin: 0 0 30px;
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 600px) {
  article {
    -webkit-column-count: 1;
       -moz-column-count: 1;
       column-count: 1;
  }
}

<article>
  <img src="http://www.robfraser-photographer.co.uk/wp-content/uploads/2012/07/SHOT-9.jpg" />
<p>Het was 17 graden onder nul toen het ijs onder onze benen begon te kraken. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta. nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim ass.</p>
</article>

Para una versión scss de este vistazo al este codepen

Esta respuesta originalmente contenía una solución que utilizaba el valor de columna (por desgracia, aún no es compatible con Firefox). Como referencia, agregué esta solución como una respuesta separada a esta pregunta.

Answer 4

Para mantener la solución sugerida original utilizando columna-lapso en lugar de una imagen de posición absoluta.

Aquí está mi solución sugerida para esto. Lo único que necesita saber es la altura de la imagen, esto podría no ser ideal, pero creo que esta solución es lo más perfecta posible.

No se usa javascript para calcular las columnas, no se necesitan elementos o clases para hacerlo funcionar. Separé el bloque de texto en parafraseo múltiple ya que creo que es una forma más correcta de hacerlo. Sin embargo, esta solución no depende de los múltiples párrafos, puede eliminarlos y aún funcionaría igual. Acabo de agregar párrafos al azar para obtener un texto más natural.

Las siguientes son las partes importantes.

article{
  column-count: 4; /* Create 4 columns */

  img {
    /* For an image to work with column-span it needs to be a 
       block element */   
    display: block;

    /* Now we can let the image expand to all columns */
    column-span: all;

    /* We''ll need to give the image a fixed height.
       A problem here is if we want a responsive layout. This wont 
       respect the aspect ratio of the image. That could be solve
       by only allowing an adoptive layout and set hard heights
       on the image. */
    height: 200px;

    /* Give it some margin to the columns under it */
    margin-bottom: 25px;

    /* Now comes the trick, first we want to push the image one 
       column to the right, that will be 25%, we''re also adding
       some extra spacing to make it look nicer */
    margin-left: calc(25% + 10px); 

    /* Since we''ve pushed it one column to the right we only
       want it to take up 75% (3/4) of the total width. */
    width: calc(75% - 10px);
  }

  /* Lastly we want to give the first paragraph a negative margin
     equal to the image height. This will move the first column
     up to align with the top of the image. */
  p:first-of-type { margin-top: -($imageHeight+25); }
}

El completo, funcionando, ejemplo

/* Just to make it look a little nicer */
body {
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  padding: 1em;
}

article {
  max-width: 860px;
  -webkit-column-count: 4;
     -moz-column-count: 4;
          column-count: 4;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
}
article img {
  display: block;
  -webkit-column-span: all;
     -moz-column-span: all;
          column-span: all;
  height: 200px;
  width: calc(75% - 10px);
  margin-bottom: 25px;
  margin-left: calc(25% + 10px);
}
article p {
  margin-bottom: 1.3em;
}
article p:first-of-type {
  margin-top: -225px;
}

@media screen and (max-width: 800px) {
  article {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
  article p:first-of-type {
    margin-top: 0;
  }
  article img {
    margin: 0 0 30px;
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 600px) {
  article {
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1;
  }
}

<article>
  <img src="http://www.robfraser-photographer.co.uk/wp-content/uploads/2012/07/SHOT-9.jpg" />
  <p>Het was 17 graden onder nul toen het ijs onder onze benen begon te kraken. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum
    iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
  <p>Nam liber tempor cum soluta. nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Ut wisi enim ad minim veniam.</p>
  <p>Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
    te feugait nulla facilisi.</p>
  <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
    ad minim veniam.</p>
  <p>Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
    te feugait nulla facilisi.</p>
  <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim ass.</p>
</article>

Ejecute la demostración en modo de pantalla completa para ver las columnas receptivas.

En un lado no, en realidad puede abarcar imágenes sin envoltorios añadidos como se ve en mi ejemplo.

Para hacerlo un poco mejor, también agregué dos consultas de medios. El diseño irá de 4 a 2 a 1 columna según el ancho de la pantalla. Lo bueno de mantener la imagen como primer elemento es que en pantallas más pequeñas aparecerá primero.

También agregué un ejemplo de codepen de cómo se vería escrito en scss con la altura de la imagen como una variable y usando el autoprefixer para mantener el CSS un poco más limpio. Como usamos una columna, por supuesto limitamos el soporte del navegador, pero parecía ser una solución correcta.

http://codepen.io/stenehall/pen/yYEEva?editors=110

Tenga en cuenta que esta solución solo funciona en Chrome y Safari, pero no en Firefox. Dado que Firefox todavía no es compatible con el alcance de la columna https://developer.mozilla.org/en-US/docs/Web/CSS/column-span . Según ese artículo, Internet Explorer debería funcionar, pero no lo he probado.