1. 首頁
  2. 問答
  3. 如何使一個空div採取空間

如何使一個空div採取空間

2010-08-05 58 views
77

這是我的960網格系統的情況：如何使一個空div採取空間

<div class="kundregister_grid_full"> 
    <div class="kundregister_grid_1">ID</div> 
    <div class="kundregister_grid_1">Namn</div> 
    <div class="kundregister_grid_1">Anv.Namn</div> 
    <div class="kundregister_grid_1">Email</div> 
    <div class="kundregister_grid_1">Roll</div> 
    <div class="kundregister_grid_1">Aktiv</div> 
</div>

這是我設置的div，作爲表結構。

CSS說以下內容：

.kundregister_grid_1 { 
    display: inline-block; 
    float: left; 
    margin: 0; 
    text-align: center; 
} 
.kundregister_grid_1 { 
    width: 140px; 
}

不介意瑞典命名。即使他們沒有價值，我也希望這些div顯示出來。

<div class="kundregister_grid_full"> 
<div class="kundregister_grid_1">ID</div> 
<div class="kundregister_grid_1"></div> 
<div class="kundregister_grid_1"></div> 
<div class="kundregister_grid_1">Email</div> 
<div class="kundregister_grid_1">Roll</div> 
<div class="kundregister_grid_1">Aktiv</div> 
</div>

像這樣，在這種情況下，在這兩個列中沒有'Namn'和'Avn.Namn'。但是，在chrome中運行時，它們被刪除，不再按float:left的順序推送其他div。因此，如果我在上面的同一個div中有類別，那麼這些值將被置於錯誤的類別下。

來源

2010-08-05 Oldek

回答

46

它工作，如果你刪除浮動。 http://jsbin.com/izoca/2/edit

浮動它只適用於如果一些內容例如&nbsp;

來源

2010-08-05 15:54:39 Rito

+5

另一個答案是，如果放在一個最小高度上，它會在浮動時起作用，當然在我自己的情況下也能起作用。如果這是真的（現在，在2016年），那麼這個答案是錯誤的。你可以添加min-height：1px;寬度：140px;而不需要刪除浮動或添加內容。 – 2016-08-08 12:31:38

+7

'最小高度：1px;'技巧也適用於我。 – Pete 2016-10-05 03:10:03

+0

嘗試過'element.text（「 」）;'在jQuery和' '出現在頁面上。 – Lori 2018-01-21 15:06:37

44

嘗試將&nbsp;添加到空項目。

我不明白你爲什麼不在這裏使用<table>？他們會自動做這種事情。

來源

2010-08-05 15:42:56

+8

同意。如果它是表格數據，請使用表格 - 這就是他們的用途。 – 2010-08-05 15:57:13

+3

畢竟這一次，人們仍然認爲'

== ==壞。 – saluce2014-04-15 18:01:19

+4

使用' '作爲流行解決方案可能會在某些情況下導致問題。就像當你敲出（'text-decoration：line-through;'）文字時，筆畫將顯示在' '上，而你真正想要的只是一個空格。 – Izhaki 2015-03-24 12:38:35

1

使用內聯塊時，它將表現爲內聯對象。所以沒有必要在一條線上將它們放在彼此旁邊。事實上，正如Rito所說，漂浮物需要一個「身體」，就像他們需要的尺寸一樣。

我完全同意佩卡關於使用表。每個使用div避免表格構建佈局的人都會覺得這是一種病態。但是將它們用於表格數據！這就是他們要求的。而在你的情況，我認爲你需要他們:)

但如果你真的很想你想要什麼。有一種CSS黑客方式。同浮法黑客一樣。

.kundregister_grid_1:after { content: "."; }

添加一個和你也成立：d（注：不工作在IE，但這是可以解決的）

來源

2010-08-06 13:13:10 no1cobla

1

爲什麼不加上「最小寬度」你的CSS類？

來源

2010-12-22 23:28:23 MrTombola

+0

不能在FF中工作.. – 2015-01-13 13:50:39

19

輕微更新爲@ no1cobla答案。這隱藏了這段時間。該解決方案適用於IE8 +。

.class:after 
{ 
    content: '.'; 
    visibility: hidden; 
}

來源

2012-08-02 14:02:48 Jonathan

+2

如果你想用這個作爲後備工作只是當你元素是空的添加類似：'.class：after：empty' – 2016-03-21 00:17:34

1

如果他們需要浮動，你總是可以設置最小高度爲1px，所以他們不會崩潰。

來源

2013-11-04 04:49:21 mmmeff

18

空浮動的div一個簡單的解決方案是添加：

  • 寬度（或最小寬度）
  • 最小高度

這種方式可以保持浮功能並強制它在空的時候填充空間。

我在頁面佈局列中使用這種技術，即使其他列爲空，也可以將每列保留在其位置。

例子：

.left-column 
{ 
    width: 200px; 
    min-height: 1px; 
    float: left; 
} 

.right-column 
{ 
    width: 500px; 
    min-height: 1px; 
    float: left; 
}

來源

2014-12-16 15:35:35 Engineeroholic

+1

這對我的情況非常適用。謝謝。 – Lavande 2015-08-28 05:49:18

+3

'min-height'是最好的解決方案 – Vall3y 2016-01-10 17:11:49

+0

min-height ** only **解決了寬度問題。但是，這並不妨礙div的高度爲零。 （嘗試設置div背景以查看問題）。因此 是更通用的解決方案。還有內容：「。」修復零高度問題。 – 2016-10-24 19:12:08

2

 的作品，但不是正確的方式 我認爲在W 最小高度：1px的;

來源

2015-03-25 10:17:08

3

這是一種方式：

.your-selector:empty::after { 
    content: "."; 
    visibility: hidden; 
}

來源

2015-10-23 09:29:39 vothaison

+1

我建議'content：「\ 200b」;'爲[零寬度空間]（http://www.fileformat.info/）信息/ Unicode的/炭/ 200B/index.htm的）。另一個好處是瀏覽器不會選擇這個字符（例如'CTRL + A'' CTRL + C'仍然表現相同）。 – YoYoYonnY 2016-12-02 01:29:51

0

在建築佈局標籤的自定義設置，我發現了另一個回答這個問題。這裏提供了一組自定義標籤及其CSS類。

HTML

<layout-table> 
    <layout-header> 
     <layout-column> 1 a</layout-column> 
     <layout-column> </layout-column> 
     <layout-column> 3 </layout-column> 
     <layout-column> 4 </layout-column> 
    </layout-header> 

    <layout-row> 
     <layout-column> a </layout-column> 
     <layout-column> a 1</layout-column> 
     <layout-column> a </layout-column> 
     <layout-column> a </layout-column> 
    </layout-row> 

    <layout-footer> 
     <layout-column> 1 </layout-column> 
     <layout-column> </layout-column> 
     <layout-column> 3 b</layout-column> 
     <layout-column> 4 </layout-column> 
    </layout-footer> 
</layout-table>

CSS

layout-table 
{ 
    display : table; 
    clear : both; 
    table-layout : fixed; 
    width : 100%; 
} 

layout-table:unresolved 
{ 
    color : red; 
    border: 1px blue solid; 
    empty-cells : show; 
} 

layout-header, layout-footer, layout-row 
{ 
    display : table-row; 
    clear : both; 
    empty-cells : show; 
    width : 100%; 
} 

layout-column 
{ 
    display : table-column; 
    float : left; 
    width : 25%; 
    min-width : 25%; 
    empty-cells : show; 
    box-sizing: border-box; 
    /* border: 1px solid white; */ 
    padding : 1px 1px 1px 1px; 
} 

layout-row:nth-child(even) 
{ 
    background-color : lightblue; 
} 

layout-row:hover 
{ background-color: #f5f5f5 }

這裏的關鍵是箱大小和填充。

來源

2016-07-27 18:24:17

9

只需一個僞元素內添加一個零寬度空格字符

.class:after { 
    content: '\200b'; 
}

來源

2017-01-06 10:41:51 Blowsie

1

用戶可以：

設置爲.kundregister_grid_1：

  • width（或width-min）與height（或min-height）
  • 或padding-top
  • 或padding-bottom
  • 或border-top
  • 或border-bottom

或者使用僞元素：::before或::after用：

  • {content: "\200B";}
  • 或{content: "."; visibility: hidden;}。

或將&nbsp;放入空元素內，但這有時會帶來意想不到的效果，例如。結合text-decoration: underline;

來源

2017-04-12 09:52:45 simhumileco

相關問題

 相關問題