Question

我想弄清楚如何在html中创建以下布局。

enter image description here

我想要一个始终在左侧可见的固定宽度面板。然后右边的另一个面板包含可变数量的div。右边的面板应该适合剩余的屏幕尺寸，如果里面有两个div，则显示一个滚动条。

如果有人能告诉我如何做到这一点会很棒。到目前为止，我所尝试过的所有内容都因某种原因无效。

谢谢，森

我目前的代码：的jsfiddle： http://jsfiddle.net/EUtLh/

这里的问题是，当屏幕变得足够小时，主体上会出现第二个滚动条，因此要查看比较面板中最后一个div的右边缘，我必须在两个滚动条上滚动。

.audit_log {
    white-space: nowrap;
}

.event_panel {
    display: inline-block;
    width: 160px;
}

.comparison_panel {
    display: inline-block;
    max-width: 80%;
    overflow-x: auto;
    vertical-align: top;
}

.event_details {
    display: inline-block;
    white-space: normal;
    width: 200px;
}

<body>
<div class="audit_log">
    <div class="event_panel">
    </div>
    <div class="comparison_panel">
        <div class="event_details">
            <p>I Am Details</p>
        </div>
        <div class="event_details">
            <p>I Am Details</p>
        </div>
        <div class="event_details">
            <p>I Am Details</p>
        </div>
        <div class="event_details">
            <p>I Am Details</p>
        </div>
        <div class="event_details">
            <p>I Am Details</p>
        </div>
    </div>
</div>
</body>

以下是问题的示例，请注意两个滚动条。

enter image description here

Answer 1

我修改了你的代码这是jsfiddle for http://jsfiddle.net/rahulsambari/7jeoaLkv/ ..这就是你要找的东西吗？

<div class="child_fixed">fixed one</div>
<div class="parent">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>


 .child_fixed {
     position:fixed;
     height:200px;
     background-color:yellow;
 }
 .parent {
     position:relative;
     left:65px;
     white-space:nowrap;
     max-width:200px;
     overflow:scroll;
 }
 .parent > div {
     display:inline-block;
     height:200px;
     white-space:normal;
     width:80px;
     background:red;
 }

Answer 2

那是因为外包装太小了。试试这个：

http://jsfiddle.net/EUtLh/91/

.parent{
  white-space:nowrap;
  overflow:scroll;
  width:100%;
}
.parent > div{
  display:inline-block;
  white-space:normal;
  width:80px;
  background:red;
}

基本上滚动元素的父级是其父级的100％，因此其他滚动条不会显示。

带有内联分区的固定侧面板

2 个答案: