Question

我遇到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>

http://jsfiddle.net/EL6hy/#&togetherjs=GGRwvL2Lif

Div布局问题

0 个答案: