gpt4 book ai didi

带有 flex 的 css pos 系统布局

转载 作者:行者123 更新时间:2023-12-04 08:46:26 24 4
gpt4 key购买 nike

我确实想根据此图像开发 POS 系统布局。
enter image description here
整个布局应适合显示高度。
元素列表的溢出应该是可滚动的。
右侧的两个框应占显示高度的 50%,第一个框应具有滚动功能。
这是我迄今为止所做的。我如何使用 CSS 实现这一点?

body{
min-height: 100vh;
background-color:darkgray;
margin:0
}
.container{
display: flex;
background-color:green;
height:'100%';

}

.items-list{
background-color:burlywood;
flex:3
}

.order-details{
background-color:coral;
flex: 1;
}

.display-total{
background-color:blueviolet
}

.item{
background-color:white;
padding: 1rem;
border:1px solid black;
margin-left: 1rem;
margin-right: 1rem;

}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="items-list">
<p class="item">item 1</p>
<p class="item">item 2</p>
<p class="item">item 3</p>
<p class="item">item 4</p>
<p class="item">item 5</p>
<p class="item">item 6</p>
<p class="item">item 7</p>
</div>

<div class="order-details">
<div class="cart-items">
<p class="item">item 1</p>
</div>
<div class="display-total">Total</div>
</div>
</div>
</body>
</html>

最佳答案

关键在于分配 overflow-y: scroll到可滚动的 div,然后确保它们的高度受到限制,以便它们被迫滚动。
这是一个示例片段:

body {
height: 100vh;
background-color: darkgray;
margin: 0
}

.container {
display: flex;
background-color: green;
height: 100%;
}

.items-list {
background-color: burlywood;
flex-basis: 50%;
overflow-y: scroll;
}

.order-details {
display: flex;
flex-direction: column;
background-color: coral;
flex-basis: 50%;
}

.cart-items {
flex-basis: 50%;
overflow-y: scroll;
}

.display-total {
background-color: blueviolet;
flex-basis: 50%;
}

.item {
background-color: white;
padding: 1rem;
border: 1px solid black;
margin-left: 1rem;
margin-right: 1rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div class="container">
<div class="items-list">
<p class="item">item 1</p>
<p class="item">item 2</p>
<p class="item">item 3</p>
<p class="item">item 4</p>
<p class="item">item 5</p>
<p class="item">item 6</p>
<p class="item">item 7</p>
</div>

<div class="order-details">
<div class="cart-items">
<p class="item">item 1</p>
<p class="item">item 2</p>
<p class="item">item 3</p>
<p class="item">item 4</p>
</div>
<div class="display-total">Total</div>
</div>
</div>
</body>

</html>

关于带有 flex 的 css pos 系统布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64290319/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com