Question

我有两个div，第一个没有太多内容，第二个有很多内容。我希望它们并排浮动，使得第一个div仅与文本一样宽，第二个div填充剩余的水平空间。并且，我不想指定固定宽度。

以下是使用表格所需的外观： http://jsfiddle.net/enRkR/

这可以通过CSS浮动轻松完成，还是表布局是实现这种外观的唯一方法？

Answer 1

是的，你可以用css＆amp;它适用于所有浏览器。这样做：

.right{
    overflow:hidden;
    background:red;
}
.left{
    float:left;
    background:green;
}

查看此实例http://jsfiddle.net/enRkR/8/

Answer 2

<div style="float:left">less content</div>
<div>More content More content
</div>

Answer 3

试试这个：

<div>
  <div id="div1" style="float:left">
     content
  </div>
  <div id="div2" >
     content
  </div>
<div>

或

请参阅：How to style Div elements as Tables

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head><title>table using divs</title>
<style type="text/css">
    .div-table{display:table; border:1px solid #003399;}
    .div-table-caption{display:table-caption; background:#009999;}
    .div-table-row{display:table-row;}
    .div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399;}
</style>
</head>
<body>
<div class="div-table">
    <div class="div-table-caption">This is a caption</div>
    <div class="div-table-row">
    <div class="div-table-col">1st Column</div>
    <div class="div-table-col">2nd Column</div>
</div>
</div>
</body>
</html>

注意：要使用这些CSS属性值，您需要一个支持它们的Web浏览器。不幸的是，这转化为有限数量的网络浏览器，如IE 8，Firefox 3，Opera 9等

如何在不指定宽度的情况下并排浮动两个div？

3 个答案: