與css相對定位的問題

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>

它應該如下所示： 好例子

但我明白了： 不好的例子

或這個： 更壞的結果

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

結束於： 在此輸入圖像描述

Answer 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;
}

Answer 2

你有沒有考慮過一排三個單元格的桌子？ 不完全確定內容是什么，但這可能是另一條路線？

這只是一頁嗎？ 或者跨多個頁面？ 如果跨多個頁面，那么您可以使用具有反映ContentPlaceHolders的相關樣式的主頁面？

與css相對定位的問題

問題描述

2 個解決方案

解決方案1
1 2013-07-22 20:42:46

解決方案2
1 已采納 2013-07-22 22:13:41

與css相對定位的問題

問題描述

2 個解決方案

解決方案1 1 2013-07-22 20:42:46

解決方案2 1 已采納 2013-07-22 22:13:41

解決方案1
1 2013-07-22 20:42:46

解決方案2
1 已采納 2013-07-22 22:13:41