css布局（固定）

是否有可能在css中创建master-detail-states布局？
我需要3 placeholders：css布局（固定）

+---------------+-------+ 
|  A  | B | 
+-----------------------+ 
|   C   | 
+-----------------------+

Block A - 是orders列表。
Block B - 是选择的顺序
Block C的国家名单 - 是选择顺序

每个模块都会有自己的垂直滚动条的详细信息列表中，但整个页面不能滚动 - 这意味着，每个块总是在自己的地方，即使我有1000个订单，1000个细节和1000个状态。

是否可以用css做到这一点？

来源

2011-12-21 Lari13

是的，这是可能的。 – Scott 2011-12-21 09:47:04

:)感谢您的希望:)但如何？ – Lari13 2011-12-21 09:48:21

你有什么尝试？什么不适合你？还是你只是在寻找某人为你写代码？ – Scott 2011-12-21 09:49:11

它实际上是一个非常直接的CSS布局：

DEMO HERE

来源

2011-12-21 09:58:33 Scott

谢谢，这就是我需要的！ – Lari13 2011-12-21 10:02:41

不客气。在将来你真的应该在代码中发布你所在的位置，并解释你所尝试过的。 – Scott 2011-12-21 10:03:53

也许是这样的：

<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是不是虽然我的最强点，所以可能有一些布局问题;）

我希望可以帮助一些。

来源

2011-12-21 09:53:45

对卡尔斯的答案稍微有些回应。

您也可以使用此解决方案。

<style> 
    div#scrollable { 
    overflow:auto; 
    height:###; 
    width:###; 
    } 
</style> 


<div id="scrollable"> 
    Your divs inside here 
</div>

来源

2011-12-21 09:56:45 Undefined

这应该工作整齐，甚至更短:) – 2011-12-21 09:57:55

这将是你的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>

这是你在你的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; 
}

来源

2011-12-21 10:08:20

css布局（固定）

回答

相关问题