英文:
How can I make css Scrollable horizontal div with two row?
问题
I want to make this UI (two rows)
每个元素都有自己的宽度并且可滚动
但我想要按照以下的顺序
如何使用CSS制作这个UI？
英文:
I want to make this UI (two rows)<br>
every elements has own width and scrollable<br>
and I found some ways like this link<br>
https://codesandbox.io/s/flex-horizontal-scroll-with-wrap-max-2-rows-d7zj3m?file=/src/App.js:77-84
but I want to make the order is
How can I make this ui with css?
答案1
得分: 2
"Overflow-x" is用于水平滚动 div，但如果没有"no wrap"，将不起作用。
英文:
"Overflow-x" is to scroll div horizontally but won't work without "no wrap"
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container{
background: lightblue;
width: 30%;
height:50px;
overflow-x: scroll;
white-space: nowrap;
}
button{
margin: 2px;
height: 20px;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<div class="container">
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<br>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
<button>CSS</button>
</div>
</body>
</html>
<!-- end snippet -->
but If you need to print odd and even numbers instead,
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<body>
<style>
.container {
background: lightblue;
width: 100px;
overflow-x: scroll;
white-space: nowrap;
}
p {
margin: 5px;
}
</style>
<div class=container>
<p class="special"></p>
<p class="first"></p>
<p class="second"></p>
<p class="special1"></p>
</div>
<script>
function print() {
var i;
var special = document.getElementsByClassName("special")[0];
var write = document.getElementsByClassName("first")[0];
var write1 = document.getElementsByClassName("second")[0];
var special1 = document.getElementsByClassName("special1")[0];
for (i = 1; i <= 62; i++) {
special.innerHTML += ' - ';
}
for (i = 1; i <= 60; i++) {
if ((i % 2) == 0) {
continue; //if num is odd, skip it.
}
write.innerHTML += i + ' ';
}
for (i = 2; i <= 60; i++) {
if ((i % 2) == 1) {
continue; //if num is odd, skip it.
}
write1.innerHTML += i + ' ';
}
for (i = 1; i <= 62; i++) {
special1.innerHTML += ' - ';
}
}
print(); //invoke print function
</script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论