Question

我正在尝试构建一个中间有一个大div的页面，它在左边和右边的“其他div”上放置了问题末尾的代码。三个div应该包含在另一个div中（称为外部），它的高度应该（几乎）恰好是中间div的高度。因为中间div的高度不固定，所以外部div也是如此。

尝试使用相对定位将我的中间div设置在左侧和右侧的下方。设置中间div的中间div在中间div和外部div的下边界之间留下一个空白区域。使用绝对定位会导致折叠的外部div。

我会很高兴任何提示或建议。

parascus

<html>
<head>
<style type="text/css">
#outer {
   width:300px;
   border:1px solid #000000;
}

#left {
   position:relative;
   display:inline-block;
   float:left;
   margin:3px;
   width:50px;
   border:1px solid #C08080;
}

#right {
   position:relative;
   display:inline-block;
   float:left;
   left:185px;
   margin:3px;
   width:50px;
   border:1px solid #C08080;
   text-align:right;
}

#middle {
    background-color: #FBE6AD;
    display: inline-block;
    overflow: hidden;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    left: 50px;
    top: -48;
    width: 200px;
}
</style>
</head>
<body>
<div id='outer'>
<div id='left'>DIV Left</div>
<div id='right'>DIV Right</div>
<div id='middle'>
DIV Middle<br>
with an<br>
unknown height<br>
which has effect on the outer height.
</div>
</div>
</body>
</html>

它应如下所示： good example

但我得到了这个： bad example

或者这个： worse result

解决方案（由fenix触发）是：

<html>
<head>
<style type="text/css">
#outer {
    border:1px solid #000000;
    display:inline-block;
    width:300px;
}

#x {
    display:table-row;
}

#left {
    background-color: #c0c0c0;
    position:relative;
    display:inline-block;
    float:left;
    margin:3px -5px 0px 3px;
    width:50px;
    border:1px solid #C08080;
    padding:0px;
}

#right {
    background-color: #c0c0c0;
    position:relative;
    display:inline-block;
    float:left;
    margin:3px 3px 0px -5px;
    width:50px;
    border:1px solid #C08080;
    text-align:right;
}

#middle {
    background-color: rgba(250, 220, 200, 0.8);
    display: inline-block;
    float:left;
    overflow: hidden;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    width: 200px;
    margin:3px 0px 6px 0px;
    z-index:10;
}
</style>
</head>
<body>
<div id='outer'>
<div id='x'>
<div id='left'>DIV Left</div>
<div id='middle'>
DIV Middle<br>
with an<br>
unknown height<br>
which has effect on the outer height.
</div>
<div id='right'>DIV Right</div>
</div>
</div>
</body>
</html>

结束于： enter image description here

Answer 1

position:relative的目的是为绝对定位的子元素设置原点。

因此，只有外部元素需要position:relative，内部元素需要position:absolute（以及top，left或bottom，{{1}定位）。

绝对定位的元素也会从布局流中删除，因此应删除right和inline-block，因为它没有布局上下文。

尝试一下：

float

Answer 2

您是否考虑过一排三个单元格的表？不完全确定内容是什么，但这可能是另一种选择？

这只是一页吗？或者跨多个页面？如果跨越多个页面，那么您可以使用具有反映ContentPlaceHolders的相关样式的主页面？

与css相对定位的问题

2 个答案: