CSS 如何在不指定宽度的情况下并排浮动两个 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8089590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I float two divs side-by-side without specifying a width?
提问by Nick Clark
I have two divs, the first doesn't have much content and the second has a lot of content. I want them to float side-by-side such that the first div is only as wide as the text and the second div fills the remaining amount of horizontal space. And, I don't want to specify fixed widths.
我有两个 div，第一个没有太多内容，第二个有很多内容。我希望它们并排浮动，以便第一个 div 仅与文本一样宽，第二个 div 填充剩余的水平空间。而且，我不想指定固定宽度。
Here is the desired appearance using tables: http://jsfiddle.net/enRkR/
这是使用表格所需的外观：http: //jsfiddle.net/enRkR/
Can this easily be done with CSS floats, or is a table layout the only way to achieve this look?
这可以通过 CSS 浮动轻松完成，还是表格布局是实现这种外观的唯一方法？
回答by sandeep
Yes, you can do it with css & it's work in all browsers. Do like this:
是的，您可以使用 css 来实现它，并且它适用于所有浏览器。这样做：
.right{
overflow:hidden;
background:red;
}
.left{
float:left;
background:green;
}
Check this live example http://jsfiddle.net/enRkR/8/
检查这个现场示例http://jsfiddle.net/enRkR/8/
回答by tmjam
<div style="float:left">less content</div>
<div>More content More content
</div>
回答by Pranay Rana
Try this :
尝试这个 ：
<div>
<div id="div1" style="float:left">
content
</div>
<div id="div2" >
content
</div>
<div>
Or
或者
refer this : How to style Div elements as Tables
参考这个：如何将 Div 元素设置为表格
<!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>
Note :To use these CSS property values, you need to have a web browser which supports them. Unfortunately, that translates to a limited number of web browsers such as IE 8, Firefox 3, Opera 9 and so on
注意：要使用这些 CSS 属性值，您需要有一个支持它们的 Web 浏览器。不幸的是，这转化为有限数量的网络浏览器，例如 IE 8、Firefox 3、Opera 9 等
