我想弄清楚如何在 html 中创建以下布局。
我想要一个始终在左侧可见的固定宽度面板。然后是右侧的另一个面板，其中包含可变数量的 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>
这是一个问题示例，请注意两个滚动条。
最佳答案
我修改了你的代码，这是它的 jsfiddle 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;
}
关于html - 带有内联 Div 的固定侧面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26066360/