Question

我一直在页面中处理DIV的位置。我添加了一张图片

http://www.tiikoni.com/tis/view/?id=0e90b7f

主要是，我有一个名为（A）的容器DIV，在里面我想要一个名为（B）的DIV完全对齐，我会在父容器DIV中有很多名为（C等等......）的DIV但是所有这些都在左侧。

我想要的是右侧的DIV（B）必须保持在图片中，其高度与带有CSS的容器DIV（A）相同。有可能吗？

我把这个CSS试用到我的DIV（B）：

.panelB{
    float: right;
    display: block;
    width: 310px;
    height: 100%;
    overflow-y: auto;
}

如果我添加另一个包含左边所有迷你div的DIV，我可以解决这个问题，但我不能仅使用CSS更改此设计。那么，我怎样才能让左边的所有独立div都尊重一个谨慎的空间，让右边的面板（B）就在右边。

我忘了说在DIV（B）中还有一些迷你div，用户可以将其添加到名为（A）的主容器div中。我的意思是，在B上有一个DIV并且用户点击它以在左侧自动添加它（这意味着主容器（A））所以当DIV（B）开始失去一个div时，它会失去它的高度而且所有的容器上添加的div开始取代DIV（B）

Answer 1

如果您希望.panelB的高度扩展/收缩到C块元素的总高度堆栈，您可以absolute position .panelB到右侧屏幕，并将其父位置设置为relative并向其添加padding-right: width of .panelB，如此（demo）：

*, *:before, *:after {
    box-sizing: border-box;
}
.wrap{
    position: relative;
    width: 100%;
    background: green;
    padding-right: 310px;/*width of .panelB*/
}
.a{
    border: 1px solid cyan;
    display: inline-block;
    padding: 20px;
    margin: 5px;
}
.right-panel{
    position: absolute;
    top: 5px; bottom: 5px;
    right: 5px;
    width: 310px;
    background: yellow;
    min-height: 50px;/*just in case*/
}

Answer 2

问题是你看不到A界限..所以让我们想象一下（或者使用背景颜色）

enter image description here

您需要做的就是将panelA和panelB与

放在一起

display:block;
float:left;

只有当面板A和B并排放置时，您才能在A面板内排列内部单元格（C）

如何处理DIV的位置和高度

2 个答案: