[英]Why is there a gap between those 2 divs
http://jsfiddle.net/D9gnP/110/
兩列之間是一個小差距。從哪里出現差距我什么都沒設置?
這個todo有什么顯示:這些元素的內聯塊? 他們有內部保證金嗎?
<div id="wrapper" style="margin:auto;background-color:yellow;height:100%;">
<div style="width:50px;height:100%;">
<div class="fluid-column" style="height:80%; background-color:green;">
<div style="background-color:#ff99cc; height:25%;">1</div>
<div style="background-color:#ff33cc; height:50%;">2</div>
<div style="background-color:#ff66cc; height:25%;">3</div>
</div>
<div class="fix-column" style="height:20%; background-color:violet">
<div style="background-color: orange;height:50%;">Total</div>
<div style="background-color: blue;height:50%;">Test</div>
</div>
</div>
</div>
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
}
div {
text-align:center;
text-indent:-0.5em;;
}
div span {
display:inline-block;
height:100%;
vertical-align:middle;
width:0;
}
由於元素是內聯的,因此它們被視為這樣,包括由於空白而產生的空間。
嘗試刪除元素之間的空白區域(包括新行)。
<div>Content</div><!-- this white space/new line causes the gap -->
<div>Content</div>
<div>Content</div><div>Content</div><!-- no new line/white space, no gap-->
您還可以將其添加到容器元素以進行調整:
word-spacing: 0;
或者你可以只使用浮動元素:)
看到這里,如果你只是刪除空格,按預期工作: http : //jsfiddle.net/D9gnP/121/
我認為HTML標記中的空格 - 標記之間的縮進 - 會被瀏覽器解釋。 在設計水平導航帶時,我遇到過類似的問題。
不幸的是,除了完全不同的布局之外,我發現的唯一解決方案是編寫沒有任何空格的HTML標記,這可能會非常難看。
這是因為HTML中的空白區域。 嘗試刪除兩個列div之間的中斷並且它已經消失,或嘗試此解決方案:
粘貼此代碼為您的HTML:
<div id="wrapper" style="background-color:yellow;height:100%;">
<div style="width:50px;height:100%;display:inline-block;">
<div class="fluid-column" style="height:80%;background-color:green;">
<div style="background-color:#ff99cc;height:25%;"> <span></span>1</div>
<div style="background-color:#ff33cc;height:50%;"><span></span>2</div>
<div style="background-color:#ff66cc;height:25%;"><span></span>3</div></div>
<div class="fix-column" style="height:20%;background-color:violet">
<div style="background-color:orange;height:50%;"> <span></span>Total</div>
<div style="background-color:white;height:50%;"><span></span>Test</div>
</div>
</div><div style="width:50px;height:100%;display:inline-block;">
<div class="fluid-column" style="height:80%;background-color:green;">
<div style="background-color:#ff99cc;height:25%;"> <span></span>1</div>
<div style="background-color:#ff33cc;height:50%;"><span></span>2</div>
<div style="background-color:#ff66cc;height:25%;"><span></span>3</div></div>
<div class="fix-column" style="height:20%;background-color:violet">
<div style="background-color:orange;height:50%;"> <span></span>Total</div>
<div style="background-color:white;height:50%;"><span></span>Test</div>
</div>
</div>
</div>
請注意,源代碼中的2個div之間沒有任何內容.ex:
<div>data</div><div>data</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.