刪除不需要的利潤率由於HTML

斷行，我得到block1和block2之間不必要的邊緣具display: inline-block風格。看到這個jsFiddle。刪除不需要的利潤率由於HTML

HTML

<div id="container"> 
    <div id="innercontainer"> 
     <div id="block1"> 
      block1 
     </div> 
     <div id="block2"> 
      block2 
     </div> 
    </div> 
</div>

CSS

* { 
    margin: 0px; 
    padding: 0px; 
} 
#container { 
    background-color: #f00; 
    width: 100%; 
    height: 200px; 
} 
#innercontainer { 
    background-color: #0f0; 
    width: 200px; 
    height: 200px; 
    margin: 0px auto; 
} 
#block1, #block2 { 
    display: inline-block; 
    background-color: #00f; 
    height: 200px; 
}

當我改變了HTML這一保證金消失：

<div id="container"> 
    <div id="innercontainer"> 
     <div id="block1"> 
      block1 
     </div><div id="block2"> 
      block2 
     </div> 
    </div> 
</div>

或本：

<div id="container"> 
    <div id="innercontainer"> 
     <div id="block1"> 
      block1 
     </div><!-- 
    --><div id="block2"> 
      block2 
     </div> 
    </div> 
</div>

雖然我更喜歡後者，我還是做了不知道是否有人知道一個解決方案，以便我可以使用原始的HTML，但沒有空格在innercontainer顯示出來。另外請注意，我想避免兩個block1和block2設置float: left;或使他們通過position: absolute|relative浮動，因爲其產生在我的佈局等問題。有任何想法嗎？

編輯

好了，我與我的佈局比較麻煩。當我添加了一個圖像塊1，整個街區向下移動，很奇怪（見jsFiddle）。我現在用float: left和將要弄清楚如何添加消耗右側的自由空間覈實。

來源

2012-11-17 Wouter Huysentruit

漂浮時，有什麼其他問題？ –

右側的innercontainer中的剩餘空間應該填充'content'div。 –

你能修整寬度到百分比嗎？即＃塊1 25％＃塊2的25％和新的div 50％ –

更新CSS的這一部分：

#block1, #block2 { 
    display: block; 
    float: left; 
    background-color: #00f; 
    height: 200px; 
}

當你在線，空間採取的空間！

編輯：

爲了安全起見改變HTML

的這部分

<div id="container"> 
    <div id="innercontainer"> 
     <div id="block1"> 
      block1 
     </div> 
     <div id="block2"> 
      block2 
     </div> 
     <div style="clear: both"></div> 
    </div>

來源

2012-11-17 12:04:33

您的引用「當您在線時，空間佔用空間！「讓我想：如果我在'innercontainer'上設置'font-size：0px'並在'block1'和'block2'中重置正確的'font-size'，這實際上會修復它！不知道它是否是跨瀏覽器，請參閱[jsFiddle]（http://jsfiddle.net/Za4AE/） –

不錯，趕緊試試吧，如果不行的話 –

好吧，所以我的佈局更麻煩了當我添加圖片到block1，整個塊向下移動，非常奇怪:)我現在使用'float：left'，並且必須弄清楚如何添加一個消耗右邊空閒空間的div。 –

如果你想使用display: inline-block;。你需要像你提到的那樣關閉標籤之間的差距。因爲它自己也被視爲內聯元素。當兩個標籤之間有空格或換行符時會在它們之間產生間隙。

您可以通過周圍的容器的設置字體大小解決這個問題，以0並將它們放回子節點。

#innercontainer { 
    background-color: #0f0; 
    width: 200px; 
    height: 200px; 
    margin: 0px auto; 

    font-size: 0px; 

} 
#block1, #block2 { 
    display: inline-block; 
    background-color: #00f; 
    height: 200px; 

    font-size: 15px; 

}

http://jsfiddle.net/SbUwt/27/

來源

2012-11-17 12:13:12

設置字體大小到0也是我想到的，但我有更多的問題。當我添加一個圖像block1，該塊向下移動了一個未知的原因。看起來像'float：left'是唯一的出路2個div粘附togetter。 –

刪除不需要的利潤率由於HTML

回答

相關問題