CSS:两个字段,剩下一个弹性宽度,右边占用剩余空间

前端之家收集整理的这篇文章主要介绍了CSS:两个字段,剩下一个弹性宽度,右边占用剩余空间前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
------------- --------------------------------------------------
| some text | | some more text,sometimes more,sometimes less |
------------- --------------------------------------------------

|<------------------------- 100% width ----------------------->|

所以我有上面的布局.左框应该始终尽可能小,而右框应占用剩余空间.这通常是漂浮的:左边.

问题是,右边的盒子可以增长很多,而左边的盒子几乎保证非常小(但是尺寸不同,所以需要灵活).如果右框增长,我需要这样做:

------------- --------------------------------------------------
| some text | | quite a lot of text,actually,really quite a  |
------------- | bunch of it,you could say this is really      |
              | quite a heck of a lot of text                  |
              --------------------------------------------------

如果我使用一个float:left,如果它包含很多文本,那么右边的框会在左边的框中进行换行:

-------------
| some text |                                         (not good)
-------------
----------------------------------------------------------------
| quite a lot of text,really quite a bunch of it,|
| you could say this is really quite a heck of a lot of text   |
----------------------------------------------------------------

如果我同时使用一个表,如果两者都包含很少的文本,则左框可能会不必要地增长:

(not good)
-------------------------------- -------------------------------
| some text                    | | not that much text          |
-------------------------------- -------------------------------

此外,左框不应该断线.但是由于它包含了一些HTML元素,而不仅仅是纯文本,所以在所有浏览器中都不能使用no-wrap.

这个问题有什么好的解决方案?

编辑

右边框占用剩余的宽度并不是非常重要,只是它始终保持在左边框的右侧.

解决方法

对于右边框使用overflow:hidden;宽度:自动;而不是浮动.无论内容多少,都应该留下剩下的空间.继续浮动左框.
原文链接:https://www.f2er.com/css/216816.html

猜你在找的CSS相关文章