CSS(3) 布局有问题。我想要实现的是:
- 具有通用的水平和垂直布局/面板
- 允许此类面板的子面板占用可用空间并根据需要滚动
我已经在网上搜索了解决方案并将它们组合到我目前的状态,但是
- HorizontalPanel 中的文本元素会导致奇怪的重叠效果
- 滚动区域仅在我计算绝对大小并将其附加为样式属性时才起作用-如何使用 CSS 将其自动调整为剩余空间?
请注意:
- 我想使用 CSS3,我不关心 IE 或其他一些不理解这一点的恐龙。但是,如果有一个兼容的解决方案没有黑客攻击就更好了。
- 我实际上正在使用 GWT 生成 HTML,并且可以动态调整弹出窗口的大小。所以我正在寻找 CSS 解决方案而不是 HTML 更改。
源代码来了:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-size: 16pt;
}
.VerticalPanel > * {
display: block;
}
.HorizontalPanel {
overflow: hidden;
/*overflow-x: auto;*/
white-space: nowrap;
display: flex;
}
.HorizontalPanel > * {
/*display: inline-block;*/
}
.Window {
background: white;
box-shadow: 4px 4px 5px 0px black;
border-radius: 0.5em;
}
.WindowContent {
width: 100%;
height: 100%;
overflow: auto;
}
.Window .WindowTitleBar {
border-top-color: #e6e6e6;
border-left-color: #cdcdcd;
border-right-color: #808080;
border-bottom-color: #676767;
border-width: 1px;
cursor: move;
background-image: linear-gradient(to bottom, #ffffff, #e0e0e0);
border-style: solid;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
}
.Window .WindowTitleBar:hover {
background-image: linear-gradient(to bottom, #ffffff, #b6cff3);
}
.Window .WindowTitleBar:focus,
.Window .WindowTitleBar:active {
background-image: linear-gradient(to bottom, #ffffff, #74a3e9);
}
.Window .WindowTitleBar .WindowTitle {
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
width: 100%;
padding: 0.2em;
-moz-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div style="left: 325px; top: 14px; position: absolute; overflow: visible;" class="Window Popup" id="mmm70">
<div class="popupContent">
<div class="VerticalPanel" style="width: 110px; height: 90px;">
<div class="HorizontalPanel WindowTitleBar">
<span class="WindowTitle">Popup Test</span>
</div>
<div class="VerticalPanel WindowContent">
<div class="VerticalPanel" aria-hidden="false" id="mmm71">
<div class="Label" aria-hidden="false" id="mmm72">Hello World!</div>
<div class="HorizontalPanel">
<span>Span Text1 </span>
<div>Div Text1 </div>
<div>Text </div>
<span>and words</span>
</div>
<button type="button" class="Button" id="mmm73">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="VerticalPanel">
<button>Click me1</button>
<span>Span Text</span>
<div>Div Text</div>
<button>Click me2</button>
<button>Click me3</button>
<button>Click me4</button>
</div>
<div class="VerticalPanel">
<div class="HorizontalPanel">
<button>Click me1</button>
<span>Span Text1 </span>
<div>Div Text1 </div>
<button>Click me2</button>
<span>Span Text2 </span>
<div>Div Text2 </div>
<button>Click me3</button>
<span>Span Text3 </span>
<div>Div Text3 </div>
<button>Click me4</button>
<span>Span Text4 </span>
<div>Div Text4 </div>
<button>Click me5</button>
<span>Span Text5 </span>
<div>Div Text5 </div>
<button>Click me6</button>
<span>Span Text6 </span>
<div>Div Text6 </div>
<button>Click me7</button>
<span>Span Text7 </span>
<div>Div Text7 </div>
<button>Click me8</button>
</div>
<div class="HorizontalPanel">
<button>Click me1</button>
<button>Click me2</button>
<button>Click me3</button>
<button>Click me4</button>
<button>Click me5</button>
<button>Click me6</button>
<button>Click me7</button>
<button>Click me8</button>
</div>
</div>
</body>
</html>