Pour garder l'original de la proposition de solution à l'aide de la colonne durée au lieu d'une absolue placé l'image.
Voici ma proposition de solution pour cela. La seule chose que vous devez savoir, c'est la hauteur de l'image, c'est peut-être pas idéal, mais je pense que cette solution est proche de la perfection qu'il obtient.
Pas de javascript est utilisé pour calculer les colonnes, sans ajout d'éléments ou de classes sont nécessaires pour le faire fonctionner. Je séparer le bloc de texte en plusieurs paraphraser car je pense que c'est un plus bonne façon de le faire. Cependant, cette solution ne dépend pas de la de plusieurs paragraphes, vous pouvez les supprimer et qu'il serait toujours fonctionner de la même. Je viens de aléatoirement à l'ajout des paragraphes pour obtenir un son plus naturel de texte.
Les éléments suivants sont les parties 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); }
}
Le plein, de travail, par exemple
/* 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>
S'il vous plaît exécuter la démo en mode plein écran pour voir la réactivité des colonnes.
Sur un côté pas, vous pouvez réellement span images sans l'ajout de wrappers comme dans mon exemple.
Pour le rendre un peu plus sympa, j'ai aussi ajouté deux requêtes de média. La mise en page aller de 4 à 2 pour 1 colonne en fonction de la largeur de l'écran. La partie agréable de garder l'image que le premier élément est que sur les petits écrans, il s'affichera en premier.
J'ai aussi ajouté un codepen exemple de ce à quoi il pourrait ressembler, écrit en scss avec la hauteur de l'image en tant que variable et en utilisant autoprefixer de garder le css un peu plus propre. Puisque nous sommes à l'aide de colonne, nous avons bien sûr de limiter la prise en charge du navigateur, mais qui semblait être un ok de la solution.
http://codepen.io/stenehall/pen/yYEEva?editors=110
S'il vous plaît pas que cette solution ne fonctionne que sur Chrome et Safari mais pas Firefox. Depuis firefox ne supporte pas encore la colonne de la durée de https://developer.mozilla.org/en-US/docs/Web/CSS/column-span.
Selon cet article, Internet Explorer devrait fonctionner, mais je n'ai pas testé.
