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; }
我不确定它是在mqueries css还是整个css文件，任何见解？
答案 0 :(得分：0)
你的div包含艺术家的宽度应为％。 我们假设您要显示两列而不是一列：
使用媒体查询为不同的宽度设置不同的值，然后将40％的宽度设置为您的艺术家容器div。这将把两个div放在同一行（如果主容器当然是100％）。
我的意思是。设置div宽度时使用百分比。
如果你想要一个特定的答案。你应该发布你特定问题的html和css，而不是整个代码。