如果宽度和数字都存在,则CSS多列无效(在Chrome / Safari中)

时间:2016-10-05 16:43:31

标签: css

我有以下CSS:

#maincontent {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
max-width: 80%;
float: left;
}

在Firefox(48),IE(10)和Edge中可以正常工作,但在Chrome(54)和Safari(10)中,列的宽度不受限制,只有列数。

如果删除列数,我会在Safari和Chrome中获得正确的宽度(并且可以设置div的宽度并使用它),但是这会导致所有其他浏览器(FF,IE,Edge)只显示一个长列而不是多个150px宽的列​​。

有没有人有解决方案可以在所有浏览器中使用?或者合理的polyfill会? (或者除此之外,其他一些js解决方案无处不在)。

这里正在运行:



#maincontent {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
max-width: 80%;
float: left;
}

<div id="maincontent">Lorem ipsum dolor sit amet, no pertinax suavitate per. Detraxit qualisque qui in. Id enim omittantur cum, eu per commodo civibus. At duo offendit explicari, electram constituto eu eam. Tale dicat repudiare mei ex, te vis quem nonumy. Posse lorem in vim.

Mei ut similique interesset, vis ut posse meliore, ex qui harum dolor possit. Id atqui consul pertinax vix, eam in vide duis postulant. Eu duo dicant maluisset, facilis vituperata ea qui, pro ne nonumy regione volumus. Duo ne lorem movet signiferumque, sit ad debet labore cotidieque, ea quo meliore neglegentur. Eos te postea nemore, his in porro consequat. Mei ne graeco invidunt postulant.

Te nec eirmod melius necessitatibus, falli volutpat sit at. Minim fuisset adipiscing pro eu, ut sea quod alii patrioque, pro ad elitr complectitur. Ut elitr omnesque indoctum eum. Eum id graeci iisque disputationi, his fastidii gubergren at. Quo illum mucius iisque in.

Enim causae veritus sea no. Utroque facilisi has ut. Sed postea sensibus in, vocent voluptaria et duo. Malis aliquam commune eu pri, his sale dicta laudem eu, cum aeterno eleifend reformidans in. Tation nusquam ut nam.

Pro iriure explicari an, nec modus animal eu. Ludus insolens quo no. Soleat nominati senserit at eos, eripuit ancillae vix ei, ut vidit augue reprehendunt eum. Eu per inermis phaedrum. Eam quod graece facete et. Nec eu mundi nusquam corrumpit.

Ad vel tamquam salutatus. Nam an exerci aperiam minimum. Semper iracundia ex ius, usu erat adipiscing id. Sint mucius iriure ius ei. Per et omittam assentior, ubique eleifend repudiare ei eum.

Ut movet prompta constituam vim, aperiam tacimates no has, tale singulis est te. Te praesent reprehendunt vel, vel cu menandri indoctum gloriatur, mel ex postea option nominati. Voluptua accommodare nec ne. Comprehensam vituperatoribus mei ea, falli dissentiunt sea ut. Iriure prompta imperdiet mea et, ullum possit tractatos pro at. Pericula vituperata te qui. Nam errem vocibus salutandi no, qui ea commune salutatus dissentias.

Est pertinax patrioque eu. Ea deserunt dignissim duo, mea doming mandamus ne, soluta altera officiis eu per. Diceret abhorreant ei vim. Eirmod minimum vituperata nec te, elitr verterem eu pro, amet mutat deterruisset ut vel. Ut mel accusam persecuti voluptatibus, ex mei hinc malis. Prima postulant voluptaria nam ea, mei viris nihil eirmod te.

Cu pro nominavi luptatum incorrupte, eum modus appellantur conclusionemque no, habeo offendit pertinax no eam. Sea ferri placerat forensibus ei, ius ei omnium intellegebat. Ludus nobis pri et. Eam congue oblique accusam et, ferri copiosae pro in, te sea dolor prompta. Pericula urbanitas constituam cum cu, eu pri nostro definiebas, verear graecis imperdiet no mei.

Sapientem maiestatis rationibus nam ut. Quo in stet discere elaboraret. At utamur invenire quo, ne quo tollit atomorum. Ne dissentiet concludaturque vel, et mei illud atomorum posidonium. Mollis fierent cu cum, eu sea tota soleat essent, ei sea meis labore disputationi.

Qui fierent omnesque torquatos no. Id vidit moderatius definitiones vim, purto saepe cum ne, per at insolens sapientem intellegat. Veri indoctum ei mel, solum lobortis gubergren ad mea. Omittam sensibus consequat an est, nam petentium conceptam ut, mei autem dolore an. Per ad malis adolescens.

Ad posse malis sea, an vero eleifend intellegebat per, duo inani evertitur et. Ex sed veri aeque explicari, vero tota dissentiunt usu ei. At quo laudem timeam pertinax. Unum diceret blandit an vix, mea ut zril impetus, alterum eloquentiam ei sed.

Adolescens mnesarchum efficiantur et sed. Usu eu decore audiam oblique. Delenit alienum ea ius. Ad dico dicit consetetur mel, purto unum incorrupte ei duo. His saepe reprimique ne, augue apeirian at cum.

Eros etiam quaestio eos ei, possim recusabo ne cum. Ut etiam falli eruditi duo, mel in mundi sonet comprehensam. Qui choro consequuntur ne, cu vocent iracundia persecuti eum. An lucilius volutpat tincidunt pri, quo possit persecuti eloquentiam ea. Quot erant quaerendum mei te, aperiam consulatu ad mei. Et cibo minim affert pri, id pri dicant ornatus.

Te has clita doming, copiosae postulant reformidans vix et. Est in quodsi virtute. Duo et nonumy rationibus. Dolores sententiae ea sea, liberavisse ullamcorper ad mea. Quas placerat his ad, option malorum consulatu vis ne. Ei vix singulis accusamus.</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

根据我的评论,column-count表示最大列数,但column-width表示最小列宽。因此,浏览器会尝试将文本扩展为3列并扩展每列的宽度,以便它们填充80%的最大宽度,同时确保列宽不低于(但不限于)150px。

要避开您的问题,您需要明确指定父元素的最大宽度,方法是将其设置为包含列宽和装订线宽度的计算宽度,即max-width: calc(450px + 2em)。注意:默认值column-gap(定义装订线宽度的属性)为1em

&#13;
&#13;
#maincontent {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
max-width: calc(450px + 2rem);  /* Column widths + gutter widths */
float: left;
}
&#13;
<div id="maincontent">Lorem ipsum dolor sit amet, no pertinax suavitate per. Detraxit qualisque qui in. Id enim omittantur cum, eu per commodo civibus. At duo offendit explicari, electram constituto eu eam. Tale dicat repudiare mei ex, te vis quem nonumy. Posse lorem in vim.

Mei ut similique interesset, vis ut posse meliore, ex qui harum dolor possit. Id atqui consul pertinax vix, eam in vide duis postulant. Eu duo dicant maluisset, facilis vituperata ea qui, pro ne nonumy regione volumus. Duo ne lorem movet signiferumque, sit ad debet labore cotidieque, ea quo meliore neglegentur. Eos te postea nemore, his in porro consequat. Mei ne graeco invidunt postulant.

Te nec eirmod melius necessitatibus, falli volutpat sit at. Minim fuisset adipiscing pro eu, ut sea quod alii patrioque, pro ad elitr complectitur. Ut elitr omnesque indoctum eum. Eum id graeci iisque disputationi, his fastidii gubergren at. Quo illum mucius iisque in.

Enim causae veritus sea no. Utroque facilisi has ut. Sed postea sensibus in, vocent voluptaria et duo. Malis aliquam commune eu pri, his sale dicta laudem eu, cum aeterno eleifend reformidans in. Tation nusquam ut nam.

Pro iriure explicari an, nec modus animal eu. Ludus insolens quo no. Soleat nominati senserit at eos, eripuit ancillae vix ei, ut vidit augue reprehendunt eum. Eu per inermis phaedrum. Eam quod graece facete et. Nec eu mundi nusquam corrumpit.

Ad vel tamquam salutatus. Nam an exerci aperiam minimum. Semper iracundia ex ius, usu erat adipiscing id. Sint mucius iriure ius ei. Per et omittam assentior, ubique eleifend repudiare ei eum.

Ut movet prompta constituam vim, aperiam tacimates no has, tale singulis est te. Te praesent reprehendunt vel, vel cu menandri indoctum gloriatur, mel ex postea option nominati. Voluptua accommodare nec ne. Comprehensam vituperatoribus mei ea, falli dissentiunt sea ut. Iriure prompta imperdiet mea et, ullum possit tractatos pro at. Pericula vituperata te qui. Nam errem vocibus salutandi no, qui ea commune salutatus dissentias.

Est pertinax patrioque eu. Ea deserunt dignissim duo, mea doming mandamus ne, soluta altera officiis eu per. Diceret abhorreant ei vim. Eirmod minimum vituperata nec te, elitr verterem eu pro, amet mutat deterruisset ut vel. Ut mel accusam persecuti voluptatibus, ex mei hinc malis. Prima postulant voluptaria nam ea, mei viris nihil eirmod te.

Cu pro nominavi luptatum incorrupte, eum modus appellantur conclusionemque no, habeo offendit pertinax no eam. Sea ferri placerat forensibus ei, ius ei omnium intellegebat. Ludus nobis pri et. Eam congue oblique accusam et, ferri copiosae pro in, te sea dolor prompta. Pericula urbanitas constituam cum cu, eu pri nostro definiebas, verear graecis imperdiet no mei.

Sapientem maiestatis rationibus nam ut. Quo in stet discere elaboraret. At utamur invenire quo, ne quo tollit atomorum. Ne dissentiet concludaturque vel, et mei illud atomorum posidonium. Mollis fierent cu cum, eu sea tota soleat essent, ei sea meis labore disputationi.

Qui fierent omnesque torquatos no. Id vidit moderatius definitiones vim, purto saepe cum ne, per at insolens sapientem intellegat. Veri indoctum ei mel, solum lobortis gubergren ad mea. Omittam sensibus consequat an est, nam petentium conceptam ut, mei autem dolore an. Per ad malis adolescens.

Ad posse malis sea, an vero eleifend intellegebat per, duo inani evertitur et. Ex sed veri aeque explicari, vero tota dissentiunt usu ei. At quo laudem timeam pertinax. Unum diceret blandit an vix, mea ut zril impetus, alterum eloquentiam ei sed.

Adolescens mnesarchum efficiantur et sed. Usu eu decore audiam oblique. Delenit alienum ea ius. Ad dico dicit consetetur mel, purto unum incorrupte ei duo. His saepe reprimique ne, augue apeirian at cum.

Eros etiam quaestio eos ei, possim recusabo ne cum. Ut etiam falli eruditi duo, mel in mundi sonet comprehensam. Qui choro consequuntur ne, cu vocent iracundia persecuti eum. An lucilius volutpat tincidunt pri, quo possit persecuti eloquentiam ea. Quot erant quaerendum mei te, aperiam consulatu ad mei. Et cibo minim affert pri, id pri dicant ornatus.

Te has clita doming, copiosae postulant reformidans vix et. Est in quodsi virtute. Duo et nonumy rationibus. Dolores sententiae ea sea, liberavisse ullamcorper ad mea. Quas placerat his ad, option malorum consulatu vis ne. Ei vix singulis accusamus.</div>
&#13;
&#13;
&#13;