CSS兩盒不能分割父母的寬度爲100％

這裏是JS提琴：http://jsfiddle.net/nettrinity/8YXsQ/CSS兩盒不能分割父母的寬度爲100％

<div class="outer-box"> 
    <div class="inner-one">30%</div> 
    <div class="inner-two">70%</div> 
</div>

我希望他們來劃分100％，但常是之間的差距。它是什麼？因爲我將所有邊距，填充和邊框設置爲0.它是一個錯誤嗎？

謝謝！

來源

2014-02-24 Nicolas S.Xu

是的，我該如何刪除這個差距？ –

請嘗試：float：left; （我'更新我的jsfiddle鏈接！）

http://jsfiddle.net/8YXsQ/8/

CSS：

.outer-box { 
    width:200px; 
    background-color: #ccc; 
    height:30px; 
    margin:0; 
    padding:0; 
    border:0; 
} 
.inner-one { 
    width:30%; 
    background-color: yellow; 
    height:100%; 
    margin:0; 
    padding:0; 
    border:0; 
    display:inline-block; 
    float:left; 
} 
.inner-two { 
    width:70%; 
    background-color: green; 
    height:100%; 
    margin:0; 
    padding:0; 
    border:0; 
    display:inline-block; 
}

來源

2014-02-24 16:22:26 Marcel

如果更新鏈接，其他人可能看不到問題。 –

您已設置div元素是inline-block，這會導致他們喜歡簡單的文本採取行動。你看到他們之間是一個簡單的空間。如果您從兩者之間刪除換行符，並將第二個div的寬度設置爲70%，您將得到正確的結果。

http://jsfiddle.net/8YXsQ/9/

<div class="outer-box"> 
    <div class="inner-one"></div><div class="inner-two"></div> 
</div>

無論如何，有幾個替代inline和inline-block放置彼此相鄰的元素。嘗試使用float:left或display:table作爲父項，display:table-cell作爲子元素，並查看最適合您需求的項目。

來源

2014-02-24 16:24:48 skreborn

在'float'上使用'inline-block'有很多原因，一個不應該比另一個更受歡迎。他們都有自己的問題......使用其中一個或另一個將完全取決於試圖實現的效果。 –

感謝您的提示。這讓我想起另一個關於李元素之間差距的痛苦難題。 –

@Paulie_D你是完全正確的，好點。我會相應地修改我的答案。 – skreborn

您可以將間距設置字體大小清除爲0並恢復正常。 http://jsfiddle.net/8YXsQ/3/

.outer-box { 
    width:200px; 
    background-color: #ccc; 
    height:30px; 
    margin:0; 
    padding:0; 
    border:0; 
    font-size:0; 
} 
.inner-one { 
    width:30%; 
    background-color: yellow; 
    height:100%; 
    margin:0; 
    padding:0; 
    border:0; 
    display:inline-block; 
    font-size:14px; 
} 
.inner-two { 
    width:70%; 
    background-color: green; 
    height:100%; 
    margin:0; 
    padding:0; 
    border:0; 
    display:inline-block; 
    font-size:14px; 
}

或刪除在你的HTML空間

<div class="outer-box"> 
    <div class="inner-one"></div><!-- 
    --><div class="inner-two"></div> 
</div>

或

<div class="outer-box"> 
    <div class="inner-one"></div><div class="inner-two"></div> 
</div>

你可以使用display:table;太http://jsfiddle.net/8YXsQ/11/

.outer-box { 
    width:200px; 
    display:table; 
    border-collapse:collapse; 
} 
.inner-one, .inner-two { 
    display:table-cell; 
    background:green; 
} 
.inner-one { 
    width:30%; 
    background:yellow; 
    height:1.2em; /* in case tested with no content */ 
}

來源

2014-02-24 16:24:56

刪除divs之間的換行符的伎倆：

<div class="outer-box"> 
    <div class="inner-one"></div><div class="inner-two"></div> 
</div>

見updated fiddle

另一種方法是刪除字體大小：

.outer-box { 
    font-size:0; 
}

或者只是使用float:left代替display:inline-block ...

來源

2014-02-24 16:28:28 soyuka

我正在回答我自己的問題。這個問題是密切相關的這一個：

A Space between Inline-Block List Items

總之，作爲skreborn說，內聯和行內塊元素不會是0的差距，即使你設置邊框，margin和padding爲0

也許這不是假設。修復它的方法是將父字體大小設置爲0.（重新設置子元素的寬度，字體大小或高度，如果它們相互碰撞）

來源

2014-02-24 16:50:23

CSS兩盒不能分割父母的寬度爲100％

回答

相關問題