高级CSS技巧：如何跨越CSS3网站布局中的多个列的图像？
鉴于 ：一个基本的四列布局，一个简单的连续的文本段落 ，以及只有一张照片跨越三列，右上alignment。 现在，我们如何在html / css3 / js的最后三列中优雅地展示我们的图像，以便我们的文本自动在图像周围stream动？
。
。
.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/ （ find图像应该去的地方的一个痛苦：不简单＆不优雅的开始！ ）
http://jsfiddle.net/Vbr9d/206/ （ 看起来丑陋，但HTML开始优雅的图像和文字分离！ ）
忘记旧的浏览器版本，除了目前主要的浏览器版本FireFox InternetExplorer Chrome Safari。 任何想法，方向或实验都是受欢迎的。 可选的JavaScript试用版将段落文本自动分成不同的div，但也只有在某种程度上，如果你确信CSS将不会成为这种基本布局，直到2050年。
这是一个清理解决scheme，应该可以在所有主stream浏览器中使用。 它inheritance了绝对定位的图像，而不是使用列跨度，因为Firefox还不支持。
/* 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>
保留原来的build议解决scheme，而不是使用绝对定位的图像。
这是我build议的解决scheme。 你唯一需要知道的是图像的高度，这可能不是理想的，但我认为这个解决scheme已经接近完美了。
没有JavaScript被用来计算列，不需要添加元素或类来使其工作。 因为我认为这是一个更正确的方法，所以我把文本块分成了多个释义。 但是，这个解决scheme不依赖于多个段落，你可以删除它们，它仍然是一样的。 我只是随机添加段落，以获得更自然的文本。
以下是重要的部分。
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); } }
充分的，工作的，例子
/* 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>
我认为将文本分成两块是目前唯一的解决scheme。 基本上，你漂浮图像的权利，放置一个第一个文本旁边的第一个单独的列比较，并放置第二个四列比较其余文本下面。
这个解决scheme在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; }
这里是一个例子的小提琴： http : //jsfiddle.net/1ye9tyhq/
你好：请在这里find我的答案的例子
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>
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%; }
感谢T04435
