双列CSS布局，而不必指定正确的列 [英] Two-Column CSS Layout without having to specify the right column
问题描述
我想弄清楚如何创建一个布局，显示两列，一个在左边，一个在右边。我很酷的指定左列的宽度，但由于边距和paddings，我真的不想指定正确的列的宽度，留给浏览器来决定。
我找不到任何例子，人们总是似乎给所有列一个固定的宽度。下面是一些重现问题的示例代码：
< html>
< head>
< style type =text / css>
#left，#right {
border：solid 1px＃000000;
}
#left {
float：left;
width：10％;
}
#right {
float：left;
}
< / style>
< / head>
< body>
< div id =left>我离开了< / div>
< div id =right>
< p>我是对的。< / p>
< p>这里有更多文字。< / p>
< p>让我们假设一会儿，这里有这么多的文本，
它不可能适合在任何种类的显示器上的一行。
为了这个目的，我要写一点废话，但有
总是足够废话这种世界上的任务。
我总是可以问一个政客，我相信在世界上没有一个单一的
电影画布，可以在
单行显示这样的废话。
< / div>
< / body>
< / html>
请注意，如果我删除特别长的段落，右列将足够小
有正确的列占用剩余空间的方法吗？
#left，#right {
border：solid 1px＃000000;
}
#left {
float：left;
width：10％;
}
#right {
overflow：hidden;
}
I'm trying to figure out how to create a layout that would display two columns, one on the left and one on the right side. I'm cool with specifying the width of the left column, but because of margins and paddings, I really don't want to specify the width of the right column and leave it up to the browser to decide.
I cannot find any examples on doing this, people always seem to give all columns a fixed width. Here is some sample code that reproduces the problem:
<html>
<head>
<style type="text/css">
#left, #right {
border: solid 1px #000000;
}
#left {
float: left;
width: 10%;
}
#right {
float: left;
}
</style>
</head>
<body>
<div id="left">I'm left</div>
<div id="right">
<p>I'm right.</p>
<p>There is a bit more text here.</p>
<p>Let's assume for a moment, that there is so much text here,
that it cannot possibly fit on one line on any kind of monitor.
For this purpose, I have to write a bit of nonsense, but there is
always enough nonsense for this kind of task in the world.
I could always ask a politician, I'm sure there isn't even a single
cinema canvas in the world that could display such nonsense in a
single line.
</div>
</body>
</html>
Note that if I would remove the particularly long paragraph, the right column would be small enough to fit in the same line and it would work.
Is there a way to have the right column take up the remaining space?
The trick is to put overflow:hidden into the right panel:
#left, #right {
border: solid 1px #000000;
}
#left {
float: left;
width: 10%;
}
#right {
overflow: hidden;
}
这篇关于双列CSS布局，而不必指定正确的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
