顯示3格相鄰

我有三個div的有150％的完整的長度，但我不明白他們漂浮在一條線：這裏是我的html：顯示3格相鄰

<div class="clearfix"> 
<div class="left" id="w1">TEST</div> 
<div class="left" id="w2">TEST</div> 
<div class="left" id="w3">TEST</div> 
</div>

而且我的CSS：

html,body { height:100%;width:auto;} 

.left { 
float: left; 

} 
    #w1 {width:20%; 
background-color:#009; 
    } 
#w2{width:100%; 
    background-color:#9F3; 
} 
#w3{ width:30%; 
background-color:#30C;}

這裏是小提琴的完整代碼：http://jsfiddle.net/sZwXN/1/ 除了他那將是很好，如果每個面板具有高度Ø100％！

來源

2013-07-18 Em Sta

不，我要的全長大於100％ –

如果你想連續使用3格，那麼你將使用float：left與所有格，但是不能在總格寬中佔用150％的寬度。您最多可以享受100％的折扣。因此，調整你的所有div的寬度，並採取總計100％。

來源

2013-07-18 10:29:49

To have in one line reduce the width of w2 

#w2{width:50%; 
    background-color:#9F3; 
}

來源

2013-07-18 07:00:45 Sheetal

不，我想全長超過100％ –

嘗試將此CSS和HTML

HTML

<div class="left" id="w1">TEST</div> 

<div class="right" id="w3">TEST</div> 

<div id="w2">TEST</div>

的CSS

html,body { height:100%;width:auto;} 

    .left { 
    float: left; 

    } 
    .right{float:right;} 
    #w1 {width:20%; 
    background-color:#009; 
    } 
    #w2{ 
    background-color:#9F3; 
    } 
    #w3{ width:30%; 
    background-color:#30C;}

Demo

來源

2013-07-18 07:00:47

3個div大於其父項的寬度。您需要調整它們，使它們的寬度總和小於或等於100％。

來源

2013-07-18 07:01:36

請問你能給我一個實例嗎？ –

總寬度不應超過100％。 你的情況是150％，所以與100％相同。像的150％= 12％20％約等等...

HTML，身體{高度：100％;寬度：汽車;}

.left { 
float: left; 

} 
#w1 {width:12%; 
background-color:#009; 
} 
#w2{width:70%; 
background-color:#9F3; 
} 
#w3{ width:18%; 
background-color:#30C;}

http://jsfiddle.net/sZwXN/4/

來源

2013-07-18 07:02:35 Brij

不，我要的全長大於100％ –

然後你可以設置父寬度：150％，但保持這些div的總數不超過100％，保持它們相同的比例 – Brij

浮動元素打破當你的第二個div是100％時，他們沒有空間供他們使用，因此他將永遠沒有空間讓他與其他元素在同一個水平寬度

來源

2013-07-18 07:03:49

我同意你需要減少寬度或使它在單獨的行... – Sheetal

你可以用替換，並把三個div與display: table和width: 150%放在另一個，而不是試圖欺騙float。

因此，通過更新你這樣的代碼，你會得到你在找什麼：

<div class="wrapper"> 
    <div class="left" id="w1">TEST</div> 
    <div class="left" id="w2">TEST</div> 
    <div class="left" id="w3">TEST</div> 
</div>

而CSS：

.wrapper 
{ 
    display: table; 
    width: 150%; 
} 

.left { 
    display: table-cell; 
}

並改變你的#iw寬度分別爲14%， 66%和20%以保持您正在查找的比例。

看一看：http://jsfiddle.net/sZwXN/7/

來源

2013-07-18 07:05:33 Levans

的問題是在語義，而不是在代碼中。

百分比值始終引用具有定義寬度的外部「父」元素，或者指向視口或HTML。

如果你說一個div有width: 100%;，這意味着它將和包含元素一樣大。

如果你說HTML/body是10000px或200％寬：div的寬度是相同的，因爲猜測它是100％寬。

的問題是真的錯誤問 ...嘗試通過指定你是什麼真正努力實現重整。

_{否則，您需要Chuck Norris。他數到無窮。兩次。我猜他可以數到150％。}

來源

2013-07-18 08:20:55

回答

相關問題