[英]css layout (fixed)
is it possible to create master-detail-states
layout in css? 是否可以在css中创建master-detail-states
布局?
I need 3 placeholders
: 我需要3个placeholders
:
+---------------+-------+
| A | B |
+-----------------------+
| C |
+-----------------------+
Block A
- is the list of orders
. Block A
- 是orders
列表。
Block B
- is the list of states of selected order Block B
- 是所选订单的状态列表
Block C
- is the list of details of selected order Block C
- 是所选订单的详细信息列表
Each block will have own vertical scrollbar, but whole page can't be scrolled - it means, that each block is always on own place, even if I have 1000 orders, 1000 details and 1000 states. 每个块都有自己的垂直滚动条,但整页不能滚动 - 这意味着每个块总是在自己的位置,即使我有1000个订单,1000个细节和1000个状态。
is it possible to do it with css? 可以用css做到吗?
This will be your HTML: 这将是你的HTML:
<div id="main_div">
<div id="header">
<div id="a" class="placeholder"></div>
<div id="b" class="placeholder"></div>
</div>
<div id="c" class="placeholder"></div>
</div>
And this is what you need in your css: 这就是你在css中所需要的:
#main_div {
width:1000px; /* you can change this */
height:600px; /* you can change this */
overflow:hidden;
overflow-y:hidden;
overflow-x:hidden;
}
#a {
float:left;
width:50%
}
#b {
float:right;
width:50%
}
#c {
clear:both;
width:100%
}
.placeholder {
height:300px;
max-height: 300px; /* you can change this */
overflow:scroll;
overflow-y:hidden;
}
Maybe something like this: 也许是这样的:
<style type="text/css">
.A, .B, .C
{
overflow: scroll;
}
.A, .B
{
display: inline-block;
height: 30%;
}
.A
{
width: 75%;
}
.B
{
width: 25%;
}
.C
{
width: 100%;
height: 70%;
}
</style>
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
CSS isn't my strongest point though, so there may be some layout issues ;) CSS不是我最强的观点,因此可能存在一些布局问题;)
I hope that might help a little. 我希望这可能会有所帮助。
Going a bit on Karls answer. 关于卡尔斯的回答。
You can also use this solution. 您也可以使用此解决方案。
<style>
div#scrollable {
overflow:auto;
height:###;
width:###;
}
</style>
<div id="scrollable">
Your divs inside here
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.