0

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

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

我会很感激任何提示或建议。

副歌

<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>

它应该如下所示：好例子

但我明白了： 不好的例子

或这个： 更糟糕的结果

解决方案（由 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>

这结束于： 在此处输入图像描述

4

2 回答 2

1

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

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

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

试试这个：

#outer {
   width:300px;
   border:1px solid #000000;
   position:relative; 
   min-height:200px 
}

#left {
   float:left;
   margin:3px;
   width:50px;
   border:1px solid #C08080;
}

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

#middle {
    background-color: #FBE6AD;
    overflow: hidden;
    position: absolute;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    left: 50px;
    top: 0;
    width: 200px;
}
于 2013-07-22T20:42:46.673 回答
1

您是否考虑过在一行中包含三个单元格的表格？不完全确定内容是什么，但这可能是一条替代路线？

这只会在一页上吗？还是跨多个页面？如果跨多个页面，那么您可以使用具有反映 ContentPlaceHolders 的相关样式的母版页？

于 2013-07-22T22:13:41.480 回答