Question

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

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

Answer 1

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

 #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”将始终占用任何可用的空间。包装器是一个快速清理技巧。

Answer 2

一个常见的解决方案是向左或向右浮动固定宽度的列，并为另一列提供等于或大于固定宽度列宽度的边距。

顺便说一下，如果您的列是像div这样的块级元素，则不必设置宽度，它将自动占用所有可用空间。

Answer 3

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

html宽度（100％-n px）？

3 个答案: