Question

我正在构建一个应该使用动态内容的水平滚动网站。通过CSS3 Multiple Columns在列中显示一篇文章。

在ScottS＆＃39; as suggested by him in this question的帮助下，这很有效。但是，由于我开始的文章的图片占据了约90％的页面宽度，列宽会自动调整到非常小的宽度，我希望它能在只需将它保留在30vw（我不介意在这种情况下只展示第一列的一小部分，重要的是这里所有其他列的宽度都是30vw）。

我已经读过浏览器只看到指定的列宽作为理想宽度＆＃39;，将其调整为屏幕上的可用空间。虽然我理解为什么会这样做，但如果可能的话，我仍然喜欢解决这个问题的方法。

当我没有使用ScottS的代码，并指定显示列的父div的宽度（例如4000像素）时，列就可以了。但我无法做到这一点，因为内容是动态的，所以我无法确定文章的内容。

有没有人建议如何让它发挥作用？

My fiddle here

（部分）我的CSS：

html {
height: 100%;
}

body {
margin: 0;
padding: 0; 
height: 100%;    
}

.main {
left:0%;
background: yellow;
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
}

.main:after {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 80vh; 
background: red;
z-index: 0;
}

.scroller {
overflow-y: hidden;
overflow-x: auto;
height: 100%;
position: relative;
z-index: 1;
}

.scroller img {
width:auto;
height:100%;
float:left;
}

.columns {
-webkit-column-fill: auto;
-webkit-column-width: 30vw;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 30vw;
-moz-column-gap: 40px;
height: 80vh;
padding: 0 20px;
text-align: justify;
width: auto;
}

HTML：

<div class="main">

<div class="scroller">

        <img src="img/riotclub.jpg">

     <div class="columns">
           <p>Lorem ipsum dolor sit ....</p>
      </div>

</div>

</div>

Answer 1

.scroller {
    width: 200%;
    overflow-y: hidden;
    overflow-x: auto;
    height: 100%;
    position: relative;
    z-index: 1;
}

在水平滚动CSS3多列中欺骗固定列宽

1 个答案: