html宽度（100％-n px）？

在HTML页面上，我有两列。我将第1列的宽度设置为75％，第2列的宽度设置为25％。使用style='width:75%;'设置宽度。我的列被设置为div，据我所知，使用表格进行布局被认为是不好的做法。html宽度（100％-n px）？

我的问题是，我可以让一列有固定宽度（例如200px），另一列自动占用浏览器窗口的余下宽度吗？

来源

2011-04-05 Daniel Allen Langdon

通常情况下，您可以通过使用边距来实现这一点。这方面的一个例子是如下：

#wrapper { overflow:hidden; } 

#right 
{ 
    float:right; 
    display:inline; 
    width: [Fixed Width]px; 
} 

#left 
{ 
    margin-right:[Fixed Width]px; 
    display:inline; 
}

然后HTML标记如下：

<div id="wrapper"> 
    <div id="right">Test</div> 
    <div id="left">Test</div> 
</div>

这将在IE6 +的工作，和所有我知道的主流浏览器。 “display：inline”是为了在IE6中增加额外的页边空白。

它可以工作，因为浮动被取消了页面的正常流程，所以“#left”将总是占用任何可用空间。包装是一个快速清除技巧。

来源

2011-04-05 17:24:53 Mig

'margin-right'为+1，但为什么你需要'display：inline'？任何浮动的元素都会自动成为块级元素？ – Gareth 2011-04-05 17:29:07

它修复了IE6中的双重保证金错误。现代浏览器会正确地忽略浮动元素的显示属性，但IE6不会。假设你将margin-left添加到了#right（愚蠢，我知道，你会从余额中扣除这笔金额 - 正常情况下，通常是在#left上）。这将使利润率翻倍。 – Mig 2011-04-05 17:31:31

使用<table style="width:100%;">。然后，其中一列可以有width:200px，另一列可以占用剩余的空间。

来源

2011-04-05 17:21:04

使用表格进行布局会导致页面充满难以读取的标记。 – Gareth 2011-04-05 17:31:04

我看到的每一个跨浏览器的“CSS列”解决方案（缺少CSS3）都比表格更加复杂和脆弱。这就是说，我理解道德反对意见。 – 2011-05-19 18:08:04

一个常见的解决方案是将固定宽度列向左或向右浮动，并为另一列提供等于或大于固定宽度列宽度的边距。顺便说一句，如果你的列是一个像div这样的块级元素，你不必设置宽度，它会自动占用所有可用空间。

来源

2011-04-05 17:21:27 jeroen

html宽度（100％-n px）？

回答

相关问题