Html CSS 2不带浮动的列布局

我不熟悉HTML/CSS，我想要非常简单的东西-2列布局，其中右列根据其内容（文本）获得宽度，左列占据剩余空间

我可以使用

floats

-基本上右侧

div

浮动到右侧，左侧

div

使用一些

overflow:auto

魔术获得剩余区域：

body，html{
保证金：0；
身高：100%；
}
ellipsize先生{
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.对{
浮动：对；
宽度：自动；
背景颜色：橙色；
身高：100%；
}
.左{
背景色：黑色；
宽度：自动；
溢出：自动；
身高：100%；
颜色：白色；
}

你好，世界！！！
Lorizzle ipsum shiznit黑色无尾毛，fo shizzle无尾毛。Nullizzle sapien velizzle，Volvolpat，suscipit bow哇哇，孕妇，我在大便中，诸如此类。我们要去，我看见碧昂丝在烤玉米卷，我的毛毛在烤玉米卷。流氓犯罪。Brizzle-izzle-dolizzle我的狗屎turpizzle-tempizzle-fo-shizzle。Maurizzle fo shizzle nibh shizzlin眩晕黑帮。拥有你的izzle yo mamma。把比兹勒·朗卡斯带走。在黑色的住所里，一片黑色。法特·达比比比斯勒。库拉比图尔·泰利兹勒·乌尔纳，普雷蒂兹勒·欧盟，马蒂兹勒壶，折断你的脖子，雅尔·维塔伊，努克。妈妈，妈妈，妈妈，妈妈。香喷喷的香喷喷的香喷喷的香喷喷的。

然而，我最近读了很多关于浮动错误、旧式、不应该使用等等的帖子

如果您正在寻找一个更现代的解决方案，使用FlexBox就是其中之一。下面介绍了如何通过使用

display:flex

将内容包装在包装器中，从而达到预期效果

.wrapper{
显示器：flex；
弯曲方向：行反向；
}
.对{
背景颜色：粉红色；
}
.左{
背景颜色：浅绿色
}

你好，世界！！！
Lorizzle ipsum shiznit黑色无尾毛，fo shizzle无尾毛。Nullizzle sapien velizzle，Volvolpat，suscipit bow哇哇，孕妇，我在大便中，诸如此类。我们要去，我看见碧昂丝在烤玉米卷，我的毛毛在烤玉米卷。流氓犯罪。Brizzle-izzle-dolizzle我的狗屎turpizzle-tempizzle-fo-shizzle。Maurizzle fo shizzle nibh shizzlin眩晕黑帮。拥有你的izzle yo mamma。把比兹勒·朗卡斯带走。在黑色的住所里，一片黑色。法特·达比比比斯勒。库拉比图尔·泰利兹勒·乌尔纳，普雷蒂兹勒·欧盟，马蒂兹勒壶，折断你的脖子，雅尔·维塔伊，努克。妈妈，妈妈，妈妈，妈妈。香喷喷的香喷喷的香喷喷的香喷喷的。

然而，我最近读了很多关于浮动错误、旧式、不应该使用等等的帖子

如果您正在寻找一个更现代的解决方案，使用FlexBox就是其中之一。下面介绍了如何通过使用

display:flex

将内容包装在包装器中，从而达到预期效果

.wrapper{
显示器：flex；
弯曲方向：行反向；
}
.对{
背景颜色：粉红色；
}
.左{
背景颜色：浅绿色
}

你好，世界！！！
Lorizzle ipsum shiznit黑色无尾毛，fo shizzle无尾毛。Nullizzle sapien velizzle，Volvolpat，suscipit bow哇哇，孕妇，我在大便中，诸如此类。我们要去，我看见碧昂丝在烤玉米卷，我的毛毛在烤玉米卷。流氓犯罪。Brizzle-izzle-dolizzle我的狗屎turpizzle-tempizzle-fo-shizzle。Maurizzle fo shizzle nibh shizzlin眩晕黑帮。拥有你的izzle yo mamma。把比兹勒·朗卡斯带走。在黑色的住所里，一片黑色。法特·达比比比斯勒。库拉比图尔·泰利兹勒·乌尔纳，普雷蒂兹勒·欧盟，马蒂兹勒壶，折断你的脖子，雅尔·维塔伊，努克。妈妈，妈妈，妈妈，妈妈。香喷喷的香喷喷的香喷喷的香喷喷的。

使用display:flex。它将完美地工作，如果您希望这是响应使用flex-wrap:wrap

.ellipsize {
  display: flex;
  flex-wrap: wrap
}

---

使用display:flex。它将完美地工作，如果您希望这是响应使用flex-wrap:wrap

.ellipsize {
  display: flex;
  flex-wrap: wrap
}

---

在我看来，使用内联块无法实现“左侧占用剩余空间”的效果。我看不出使用浮动有什么错。请记住，引导程序仍然使用浮点数构建其网格系统。浮点数很好-不要让嗡嗡声告诉您其他情况。虽然flex和grid对于您的情况很酷，但这并不是一个问题。imo，使用内联块无法实现“左侧占用剩余空间”的效果。我看不出使用浮动有什么错。请记住，引导程序仍然使用浮点数构建其网格系统。浮点数很好-不要让嗡嗡声告诉您其他情况。虽然flex和grid对于您的情况很酷，但这不是问题。很酷，我会试试，谢谢！还没有达到

flex

的“课程”，正如我写的那样，我是新来的：DNo问题，flex真的很好学，而且相对容易：）我只是注意到右侧的大小不是由“hello world”文本的内容决定的，所以它基本上没有完全回答这个问题。我如何根据文本的宽度动态更改正确的部分宽度以完全包含它？如果你的意思是文本分成另一行，你可以给它属性空白：nowrapCool，我会尝试，谢谢！还没有达到

flex

的“课程”，正如我写的那样，我是新来的：DNo问题，flex真的很好学，而且相对容易：）我只是注意到右侧的大小不是由“hello world”文本的内容决定的，所以它基本上没有完全回答这个问题。如何根据文本的宽度动态更改正确的部分宽度以完全包含它？如果您的意思是文本分成另一行，则可以为其提供属性空白：nowrap