如何在不指定宽度的情况下并排浮动两个div？ [英] How do I float two divs side-by-side without specifying a width?

问题描述

我有两个div，第一个没有太多的内容，第二个有很多内容。我想让它们并排浮动，使得第一个div只有文本的宽度，第二个div填充剩余的水平空间。

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.

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

Here is the desired appearance using tables: http://jsfiddle.net/enRkR/

这可以很容易地使用CSS浮动，或者是一个表格布局只有方法才能实现这个外观？

Can this easily be done with CSS floats, or is a table layout the only way to achieve this look?

推荐答案

是的，你可以用css&它在所有浏览器中工作。像这样：

Yes, you can do it with css & it's work in all browsers. Do like this:

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

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

这篇关于如何在不指定宽度的情况下并排浮动两个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！