css-multicolumn-layout

问题 I've got a directory listing that uses CSS columns but behaves differently in Chrome and Safari. Each section of the directory has a wrapper that arranges the listings into two columns. I've got the CSS so Chrome renders it the way I want: In Safari, the first item in the second column sometimes has an apparent margin above it. I can fix this in Safari by adding display: inline-block; to the list elements. This breaks the layout in Chrome, as sections which have only two items list both items

问题 I have a list of items I'd like to have in columns next to each other. I don't know how many items there will be so I can't have a fixed height. I want them to fill the space a good as possible like so: #parent { background-color: firebrick; max-height: 200px; /* <-- eliminate */ display: flex; flex-flow: column wrap; } .child { background-color: #fff; height: 30px; width: 100px; margin: 10px; padding: 3px; } <div id="parent"> <div class="child">child</div> <div class="child">child</div> <div

问题 I have an element using CSS multi-column layout to display a list of items. <div style="column-width: 300px; column-count: 3; text-align: center;"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> <div>Item 6</div> </div> The example list correctly displays as three columns, each containing two items, with each item centered within its column. However, when I have a list containing only one item, the item is shown in the first column while the space

问题 I'm having a hard time understanding the logic behind the column gap in a multi-column layout. I have the following HTML/CSS in this Fiddle: <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> </div> .flex-container { height: 500px; width: 300px; border: 1px solid blue; columns: 120px; padding: 10px; } .flex-item { background: OliveDrab; padding: 5px; width: 100px; height: 100px; line-height: 100px; color: white; text-align: center; break-inside: avoid

问题 I discovered multicolumn CSS for me, however found that when printing these styles are ignored. Is this a known bug? Or did I do something wrong? div { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; font-size: 16px; line-height: 1.6; width: 760px; } @media print { button { display: none; } } <button onclick="print()">Print...</button> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed vehicula quam, ut placerat ipsum. Cras suscipit dui nisl, at pretium

问题 Is there a way to insert a column break in HTML content using CSS column style, like <hr> , <br> or something else? E.g. you have heading than paragraph than heading than paragraph than heading than paragraph etc, and you want to insert a break at some point after a paragraph, so the column flow stops there and the continuation flows to the next column. section { columns: 2; column-rule: 1pt dashed #ECEEF2; column-fill: auto; break-inside: avoid; //* this one is done for design purposes, I

问题 I have a large section of text on a page and when the screen is larger, I have media queries to make the text form columns. However, when I do this, some of the photos don't fully go to into one column. For whatever reason it will split the photo and show a portion of it at the bottom of one column and the rest of it in the next column. This also happens with divs. If I swapped the white feature div and the image, then it also splits itself. Here's a portion of my code with a quick example:

问题 In the first snippet, you should see 4 images grouped to just the left 2 columns: [+][+][ ] [+][+] and not spread across all 3 columns as I would have expected: [+][+][+] [+] Worse yet, even 3 items in a 3 column layout fails! I get this in Chrome: [+][+][ ] [+] instead of this (which seems obvious): [+][+][+] Dear God why? Is it a bug? Or is it that the height of the column is not explicitly set? Explicit height would be a poor requirement of columns as far as fluid/dynamic content is

问题 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 want the 4 classes in the middle column to be under the class in the first column and then for "The Information Technology track consists of..." to be moved to the top of the column. How can iI do this? Here is what my code currently produces: Here is my HTML for this specific page: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="cpsc.css"> </head <body> <h2 align=center> Each track requires the following 30 hours of core courses: </h2> <ul class=center> <li>CPSC