沒有固定寬度的列布局

我想做一些非常基本的事情 - 一個兩列布局，其中左列的寬度由內容決定（總是很小），右列取剩餘寬度。沒有固定寬度的列布局

完整的例子是http://jsfiddle.net/EzHVX/2/，但基本上我有HTML如下::

<div class="left"> 
    <div class="badge">all 15</div>  
</div> 

<div class="right"> 
    <div class="badge">...</div> 
    <div class="badge">...</div>  
    .... 
</div>

和CSS的重要組成部分就是::

.left { 
    float: left; 
}  

.right { 
    float: left; 
    width: 400px; 
}

沒有明確的寬度，右列開始環繞左列，我不想要。但我也不想使用明確的寬度。而CSS不支持「100％ - 10em」寬度。即使它支持它，我寧願不硬編碼「10em」。那麼我有什麼選擇？

來源

2013-05-07 Vladimir Prus

overflow:hidden;在右邊的div將做的工作

已經更新了你給請讓知道，如果這個作品的鏈接，你

http://jsfiddle.net/EzHVX/4/

來源

2013-05-07 05:51:24

你應該發佈你的[jsFiddle]（http://jsfiddle.net/EzHVX/4/）然後，這是一個整潔的解決方案:) – 2013-05-07 05:54:09

感謝更新的鏈接 – 2013-05-07 05:56:55

謝謝，這似乎工作就像我想了。我已經看過「溢出」的文檔，老實說，不知道爲什麼它有幫助。我雖然只是確定當容器已經太大時才發生內容。那麼這裏有什麼魔力？ – 2013-05-07 10:49:59

你可以使用一些表格的佈局CSS屬性做到這一點，則向下幷包括IE8：

jsFiddle

body > div { 
    display: table-row; 
    width: 100%; 
} 
.badge { 
    background-color: #468847; 
    border-radius: 9px; 
    padding: 2px 9px; 
    color: #ffffff; 
    width: auto; 
    display: inline-block; 
    margin: 6px; 
    white-space: nowrap; 
} 
.left { 
    display: table-cell; 
} 
.right { 
    display: table-cell; 
}

來源

2013-05-07 05:51:38

您可以使用Flex佈局來實現（較老的IE瀏覽器不支持此功能。）

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box;  /* OLD - Firefox 19- (buggy but mostly works) */  
    display: -ms-flexbox; /* TWEENER - IE 10 */ 
    display: -webkit-flex; /* NEW - Chrome */ 
    display: flex;   /* NEW, Spec - Opera 12.1, Firefox 20+ */

例如：http://jsfiddle.net/EzHVX/7/

來源

2013-05-07 06:04:52

的HTML

<div class="parent"> 
    <div class="left"> 
    <div class="badge">all 15</div>  
    </div> 

    <div class="right"> 
    <div class="badge">...</div> 
    <div class="badge">...</div>  
    .... 
    </div> 
    <div class="clear"></div> 
</div>

的CSS：

.parent{ 
    widht: 100%; 
    clear:both; 
} 
.clear{ 
    clear:both; 
} 
.left { 
    float: left; 
}  

.right { 
    float: left; 
}

jQuery的

$(document).ready(function(){ 
    var parent_width= $('.parent').width(); 
    var left_width= $('.left').width(); 
    var right_width = parseInt(parent_width) - parseInt(left_width); 
    $('.right').css('max-width',right_width); 

});

來源

2013-05-07 06:20:20

沒有固定寬度的列布局

回答

相關問題