gpt4 book ai didi

html - 无需指定右列的两列 CSS 布局

转载 作者:行者123 更新时间:2023-11-28 19:06:22 26 4
gpt4 key购买 nike

我正在尝试弄清楚如何创建一个显示两列的布局,一列在左侧,一列在右侧。我很乐意指定左列的宽度,但由于边距和填充,我真的不想指定右列的宽度并由浏览器决定。

我找不到任何这样做的例子,人们似乎总是给所有列一个固定的宽度。下面是一些重现该问题的示例代码:

<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>

请注意,如果我删除特别长的段落,右栏将足够小以适契约(Contract)一行并且它会起作用。

有没有办法让右边的列占据剩余的空间?

最佳答案

诀窍是将 overflow:hidden 放入右侧面板:

#left, #right {
border: solid 1px #000000;
}

#left {
float: left;
width: 10%;
}

#right {
overflow: hidden;
}

关于html - 无需指定右列的两列 CSS 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3291610/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com