如何改變從單柱移動網站以多列

Question

https://www.davidbenrimon.com/artists.html

當我進入移動的看法，我希望它看起來（至少相當），類似於多列的桌面視圖。在單個列中滾動需要很長時間，有沒有簡單的解決辦法？

div h1, div h2, div h3, div h4, div h5, div h6 { margin-top: 30px; } 
i + h1, i + h2, i + h3, i + h4, i + h5, i + h6 { margin-top: 15px; } 
h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6, 
h2 + h1, h2 + h2, h2 + h3, h2 + h4, h2 + h5, h2 + h6, 
h3 + h1, h3 + h2, h3 + h3, h3 + h4, h3 + h5, h3 + h6, 
h4 + h1, h4 + h2, h4 + h3, h4 + h4, h4 + h5, h4 + h6, 
h5 + h1, h5 + h2, h5 + h3, h5 + h4, h5 + h5, h5 + h6, 
h6 + h1, h6 + h2, h6 + h3, h6 + h4, h6 + h5, h6 + h6 { margin-top: 14px; } 
h2 + h3, h2 + h4, h2 + h5, h2 + h6, h6 + h2, h5 + h2, h4 + h2, h3 + h2 { margin-top: 11px; } 
h3 + h4, h3 + h5, h3 + h6, h4 + h3, h5 + h3, h6 + h3 { margin-top: 9px; } 
h4 + h5, h4 + h6, h5 + h4, h6 + h4 { margin-top: 7px; } 
h5 + h5, h5 + h6, h6 + h5, h6 + h6 { margin-top: 5px; } 
.uppercase { letter-spacing: 0.04em; } 


/* columns */ 
.column { float: none !important; width: 100% !important; margin-right: 0 !important; margin-top: 40px !important; } 
.column.empty + .column { margin-top: 0 !important; } 
.column.bigpadding { padding: 60px 20px !important; } 
div .column:first-child { margin-top: 0px !important; } 
.boxed-sticky .column, 
.bordered-sticky .column { 
margin-top: 0px !important; } 
.bordered-sticky .column { border: 1px solid rgba(0,0,0,0.15); border-bottom: none; border-left: none; border-right: none; } 
.wrapper .bordered-sticky .column, .wrapper-small .bordered-sticky .column { border-left: 1px solid rgba(0,0,0,0.15); border-right: 1px solid rgba(0,0,0,0.15); } 
.bordered-sticky .column.last-col { border-bottom: 1px solid rgba(0,0,0,0.15); } 
.text-light .bordered-sticky .column { border: 1px solid rgba(255,255,255,0.22); border-bottom: none; border-left: none; border-right: none; } 
.wrapper .text-light .bordered-sticky .column, .text-light .wrapper .bordered-sticky .column, .wrapper.text-light .bordered-sticky .column, 
.wrappers-small .text-light .bordered-sticky .column, .text-light .wrapper-small .bordered-sticky .column, .wrapper-small.text-light .bordered-sticky .column { border-left: 1px solid rgba(255,255,255,0.22); border-right: 1px solid rgba(255,255,255,0.22); } 
.text-light .bordered-sticky .column.last-col { border-bottom: 1px solid rgba(255,255,255,0.22); } 
.column.empty-content { 
min-height: 220px !important; } 
.column.empty { display: none; } 

.column-section.boxed-sticky.rounded .column:first-child, .column-section.bordered-sticky.rounded .column:first-child 
{ -moz-border-radius:8px 8px 0 0; -khtml-border-radius:8px 8px 0 0; -webkit-border-radius:8px 8px 0 0; border-radius:8px 8px 0 0; } 
.column-section.boxed-sticky.rounded .column.last-col, .column-section.bordered-sticky.rounded .column.last-col 
{ -moz-border-radius:0 0 8px 8px; -khtml-border-radius:0 0 8px 8px; -webkit-border-radius:0 0 8px 8px; border-radius:0 0 8px 8px; } 

/* general spacing */ 
#page-content { min-width: inherit; max-width: 100%; } 
.page-boxed #page-content { width: 100%; } 
.wrapper { width: calc(100% - 40px); max-width: calc(100% - 40px); } 
.wrapper-small { width: calc(100% - 40px); max-width: calc(100% - 40px); } 
#page-body { padding-top: 60px; } 
footer .footer-inner { padding: 60px 0; } 
#hero #page-title { padding-top: 60px; padding-bottom: 60px; } 
header.header-style-floating + #hero #page-title { padding-top: 60px; } 
#hero.overlay-body #page-title { padding-bottom: 100px; } 
#hero.overlay-body { margin-bottom: -60px; } 
.classic-blog .blog-item { margin-top: 60px; } 
#shop-single .product-content { margin-top: 60px; } 
.related-items { margin-top: 60px; } 
.fullwidth-section .fullwidth-content { padding: 60px 0; } 
.spacer-mini { height: 15px; } 
.spacer-small { height: 30px; } 
.spacer-medium { height: 40px; } 
.spacer-big { height: 60px; } 

header .header-inner { padding: 0px 20px !important; } 

/* sidebar */ 
.main-content { width: 100%; float: none; } 
aside.sidebar { float: none; margin-right: 0; padding: 60px 20px 60px 20px !important; width: calc(100% - 40px) !important; } 
.wrapper aside.sidebar { padding: 60px 0px 60px 0px !important; width: 100% !important; } 
aside.sidebar.sidebar-grey::before { display: none; } 

/* shop */ 
#shop-single .product-thumbs { margin-top: 5px; } 
#shop-single .product-thumbs a { width: calc(20% - 4px); margin-right: 5px; } 
#shop-single .product-content .tabs .tab-container { margin-top: 30px; } 
.product-rating .star-rating { font-size: 14px; } 
#shop-single #product-review .product-rating .star-rating { font-size: 10px; line-height: 12px; } 
#shop-single #product-review .product-rating { top: -4px; } 
table.table-cart .product-remove { width: 20px; text-align: left; } 
table.table-cart .product-image { display: none; } 
table.table-cart .quantity { width: 30px; } 
table.table-cart .quantity input[type=text] { width: 15px; height: 15px; line-height: 15px; } 
table.table-cart .quantity input[type=button] { display: none; } 
table.table-cart .product-quantity { width: 30px; } 
table.table-cart .product-unit-price { display: none; } 
table.table-cart .coupon-code { width: 100%; max-width: 100%; float: none; } 
table.table-cart .coupon-code .coupon-text { width: 100%; margin: 0; } 
table.table-cart .coupon-code input[name=coupon-apply] { width: 100%; margin: 0; } 
table.table-cart .update-cart { width: 100%; margin-top: 15px; float: none; } 
#shop-cart .cart-total, #shop-checkout .cart-total, #shop-checkout .payment-option { padding: 15px; } 


/* form */ 
form .form-row { margin-top: 15px !important; } 
form .form-row:first-child, div .form-row:first-child { margin-top: 0px !important; } 

/* tabs */ 
.tabs-button ul.tab-nav li { display: block; margin: 0; border-left: none; border-top: 1px solid #e0e0e0; } 
.tabs-button ul.tab-nav li a { display: block; } 
.vertical-tabs ul.tab-nav { width: 100%; } 
.vertical-tabs .tab-container { width: 100%; } 
.tabs .tab-container { margin-top: 30px !important; } 

/* counter */ 
.counter-value { opacity:1; } 
.counter-value .main { display: block; } 
.counter-value .digit { display: none; } 

/* backtotop */ 
footer #backtotop { display: none; } 

/* pricing */ 
.bordered-sticky .pricing-table.accent-table + .pricing-table { border-left: 1px solid rgba(0,0,0,0.15); } 
.text-light .bordered-sticky .pricing-table.accent-table + .pricing-table { border-left: 1px solid rgba(255,255,255,0.22); } 

/* isotope grid */ 
.isotope-grid.isotope-spaced { width: calc(100% - 10px); left: 15px; } 

/* header search */ 
#header-search .header-search-content input[type=text] { font-size: 26px; height: 30px; line-height: 30px; }  

/* comments */ 
.comments .comment-content { margin-left: 0px; } 
.comments .user { display: none; } 
.comments .comment .children { margin-left: 20px; } 

/* single pagination */ 
#pagination ul, #single-pagination:not(.img-pagination) ul { padding: 0 20px; } 

/* img pagination */ 
.img-pagination ul li { float:none; width: 100%; } 

/* author */ 
.author-box { padding: 20px; } 
.author-box .author-image { float: none; width: 60px; } 
.author-box .author-details { float: none; width: 100%; margin-top: 20px; } 

我不知道如果itd在mqueries css或只是整體的css文件，任何見解？

Answer 1

您應該將包含藝術家的div的寬度設置爲％。 假設您想要顯示兩列而不是一列：

使用媒體查詢爲不同的寬度設置不同的值，然後爲您的藝術家容器div設置40％的寬度。這將把兩個div放在同一行（如果主容器當然是100％）。

我的觀點是。在設置div寬度時播放百分比。

如果你想要一個特定的答案。你應該發佈特定問題的html和css，而不是整個代碼。