css-multicolumn-layout

问题 My CSS columns are displaying differently in Chrome from how they're displaying in Firefox and IE9. This is the correct display in Firefox: Here's how it displays incorrectly in Chrome: I've tried changing the li to display: inline-block , which is an improvement of sorts in Chrome, but then the narrower list items appear in the same "cell". h3, h4 { font-weight: bold; padding: 0.5em 0; } .results { margin-top: 1em; box-shadow: 0 0 20px #99AABB; background-color: white; border: 3px solid

问题 I am trying to make a group of <a> using multiple columns. But it splits one <a> (Link4) into two columns. :( Just hover on Link4. Some of its part is split to second column. :( Is there any possible way to avoid this. div.Nav { height: 100% !important; } div.Nav a.icon { position: absolute; right: 0; top: 0; } div.Nav a { transition: 0.5s; line-height: 25px; text-align: center; font-weight: lighter; color: black; padding: 8px 16px; text-decoration: none; font-size: 20px; float: none

问题 Let's say I have a div which will contain a set of elements (divs), which may have different heights, but all of them will have the same width. I've achieved this currently with isotope + masonry, but since some browsers already support CSS3 multi-columns, I was hoping to have a only-CSS solution for these browsers, falling back to Javascript for the rest. This is the CSS I've been trying: .div-of-boxes { -webkit-column-count: 3; -webkit-column-gap: 10px; -moz-column-count: 3; -moz-column-gap

问题 I have a flex-box problem. Can anyone point me in the right direction? It might even be that flex-box cannot solve this situation because of the way it works. I want to display content across 4 columns. Have the content be listed in a columnar format and wrap to the next column when running out of room. display: flex; flex-direction: column; flex-wrap: wrap; height:<##>px should take care of this. But this is where things get tricky. What if I don't want a fixed height, but one that grows

问题 I have a flex-box problem. Can anyone point me in the right direction? It might even be that flex-box cannot solve this situation because of the way it works. I want to display content across 4 columns. Have the content be listed in a columnar format and wrap to the next column when running out of room. display: flex; flex-direction: column; flex-wrap: wrap; height:<##>px should take care of this. But this is where things get tricky. What if I don't want a fixed height, but one that grows

问题 Is there a way to create a masonry column layout utilizing the flexbox grid that Bootstrap 4 comes equipped with? It seems to me that all of the columns are equal height. 回答1: This is pretty much doable with standard Bootstrap 4 classes. There is even a whole section in the documentation about the Card columns feature. From the docs: Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns . Cards are built with CSS column properties instead of flexbox

问题 This question already has answers here : Is there a way to specify different widths for columns in CSS3? (3 answers) Closed 4 years ago . I'm using CSS Columns, eg: HTML: <div class="foo"> <div class="content"> </div> </div> CSS: .content { column-count: 2; } However I want to have my columns different widths when using column-width . Is that possible at all? I guess there is no way to use percentages either? 回答1: There is NO CORRECT way to set different column widths with CSS columns. Why it

问题 Ingredients: a div containing some text which we don't know the length of. What we know about the text is just it contains some keywords, 'mango' for example, and those keyword must placed at the start of a new column (like those keyword are subtitles ). Question: Is there a way to achieve this goal with HTML5 + CSS3 ( preferably without using JS, jQuery or some script-based-patches )? Actual situation (DEMO): div { columns: 2; width: 100%; height: auto; } <div> Lorem ipsum dolor sit amet,

问题 I am trying to write flexible code where I have one plain <ul> which gets automatically creates another column for every 5th element. I have found a tutorial that achieves this but places the items in a horizontal order whereas I require a vertical order. I have seen some other tutorials that outputs a vertical order, but also attaches class="first" and class="second" to each li which is not what I want. I am looking to do with with my existing HTML code. What I Want: -01 -06 -11 -02 -07 -12

问题 Want to make inline-block with horizonlal columns. I need each inline-block to have width as minimal number of columns to fit content. The problem is strange columns processing by browser. div { height: 10em; border: 1px solid red; display: inline-block; vertical-align: top; -moz-column-width: 10em; column-width: 10em; -moz-column-fill: auto; column-fill: auto; } <div> <p>Lorem ipsum dolor sit amet, an nec posse homero accumsan. Pro sale deseruisse ad. Vix cu integre fuisset insolens. Quo