CSS：顯示：inline-block的定位：絕對

請考慮下面的代碼：CSS：顯示：inline-block的定位：絕對

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <style type="text/css"> 
     .section { 
      display: block; 
      width: 200px; 
      border: 1px dashed blue; 
      margin-bottom: 10px; 
     } 
     .element-left, 
     .element-right-a, 
     .element-right-b { 
      display: inline-block; 
      background-color: #ccc; 
      vertical-align: top; 
     } 
     .element-right-a, 
     .element-right-b { 
      max-width: 100px; 
     } 
     .element-right-b { 
      position: absolute; 
      left: 100px; 
     } 
    </style> 
    <title>test</title> 
</head> 
<body> 
    <div class="section"> 
     <span class="element-left">some text</span> 
     <span class="element-right-a">some text</span> 
    </div> 
    <div class="section"> 
     <span class="element-left">some text</span> 
     <span class="element-right-a">some more text to force line wrapping</span> 
    </div> 
    <div class="section"> 
     <span class="element-left">some text</span> 
     <span class="element-right-b">some text</span> 
    </div> 
    <div class="section"> 
     <span class="element-left">some text</span> 
     <span class="element-right-b">some more text to force line wrapping</span> 
    </div> 
    <div class="section"> 
     <span class="element-left">some text</span> 
     <span class="element-right-b">some more text to force line wrapping</span> 
    </div> 
</body> 
</html>

絕對定位的元素apparantly使得他需要其高度將容納箱「忘記」。

我需要絕對定位裏面的「部分」框中，是否有另一種解決方案呢？

在此先感謝， Geronimo的

編輯

使用表格是不是一個真正的選擇，我需要某種形式的「多層次」 /「嵌套式」佈局，其中第二山坳是總是在相同的位置：

 
| some text in first column  | some text in 2nd column 
    | some indented text   | 2nd column 
    | also indented     | 2nd col 
    | even more indent   | 2nd column with a lot of text that 
            | makes it wrap 
    | text       | ... 
| blah blah      | ...

（當然的內部消除「|」 S）

來源

2011-02-18 geronimo

嘎，很難看出這是什麼檢查出來:) http://jsfiddle.net/Kyle_Sevenoaks/YTUnM/你想要的結果是什麼？ – Kyle 2011-02-18 14:33:20

當您使用position:absolute;時，該元素將從正常頁面流中取出。因此它不再影響其容器元素的佈局。所以容器元素沒有考慮到它的高度，所以如果沒有別的東西來設置高度，那麼容器將是零高度。

此外，設置display:inline-block;對於position:absolute;的元素沒有任何意義。同樣，這是因爲絕對定位將元素從頁面流中取出。這與inline-block不一致，只存在影響元素如何適應頁面流的方式。所有position:absolute;元素都被自動視爲display:block，因爲這是絕對定位的唯一邏輯顯示模式。

如果您需要需要絕對定位，那麼解決高度問題的唯一辦法就是設置容器盒的高度。

但是，我懷疑你可以沒有絕對的定位。

它看起來像你想要做的是將每個塊中的第二個<span>定位到塊中的固定位置，以便它們排隊。

這是一個經典的CSS問題。在「糟糕的日子」中，網頁設計師可以使用表格，在表格單元格上固定寬度。這顯然不是今天的網頁設計師的答案，但這是一個引發了很多問題的東西。

有很多方法可以使用CSS來完成它。

最容易的是將<span>元素設置爲display:inline-block;，並給它們兩個固定的寬度。

如：

<div class='section'> 
    <span class="element-left">some text</span> 
    <span class="element-right">some text</span> 
</div>

與下面的CSS：

.section span {display:inline-block;} 
.element-left {width:200px;} 
.element-right {width:150px;}

[編輯] 問題後，已更新

這裏的我會怎樣實現你現在問什麼：

<div class='section'> 
    <span class="element-left"><span class='indent-0'>some text</span></span> 
    <span class="element-right">some text</span> 
</div> 
<div class='section'> 
    <span class="element-left"><span class='indent-1'>some text</span></span> 
    <span class="element-right">some text</span> 
</div> 
<div class='section'> 
    <span class="element-left"><span class='indent-2'>some text</span></span> 
    <span class="element-right">some text</span> 
</div>

與下面的CSS：

.section span {display:inline-block;} 
.element-left {width:200px;} 
.indent-1 {padding:10px;} 
.indent-2 {padding:20px;} 
.element-right {width:150px;}

額外的標記少量，但它達到你想要的效果。

來源

2011-02-18 14:46:58 Spudley

表格和定義寬度的「左」元素不適用於我 - 請參閱我的問題中編輯的部分... – geronimo 2011-02-18 15:31:22

ñ o。

您可以絕對定位然後在visible: none的部分框中有一個元素的副本，但根據定義，絕對定位使其成爲不與其上的元素交互的「浮動」元素。

假設您的頁面佈局已修復，您可以使用padding-left: #px;來實現您的目標，因爲我認爲相對定位不是您想要的。

或者，你可以使用display: table-*迫使它保留了嚴格的形式，而不會影響文件結構如圖所示here

但是這取決於你是否希望細胞是流動的，你可能需要改變.section的div成display: table-row如果你不喜歡預定的寬度設置，並希望單獨的.section排隊。

來源

2011-02-18 14:34:00

這實際上可以很簡單地用div來完成。你只需要放置一個位置的div：相對內聯或塊顯示div。將其寬度和高度設置爲與包含div相同。然後你會發現你可以在裏面放置另一個div。

來源

2014-05-29 15:58:52 Twmprys

CSS：顯示：inline-block的定位：絕對

回答

相關問題