html - 没有浮点数的CSS 2列布局

我是HTML / CSS的新手，我想要非常简单的东西-2列布局，其中右列根据其内容（文本）获取宽度，而左列占据其余空间。

我能够使用floats做到这一点-基本上，右边的div浮动在右边，而左边的div使用某种overflow: auto魔术来获取剩余的区域：

body, html {
  margin: 0;
  height: 100%;
}

.ellipsize {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.right {
  float: right;
  width: auto;
  background-color: orange;
  height: 100%;
}

.left {
  background-color: black;
  width: auto;
  overflow: auto;
  height: 100%;
  color: white;
}

<div class='right'>HELLO WORLD!!!</div>
<div class='left'>
  <div class="ellipsize">Lorizzle ipsum shiznit black amizzle, fo shizzle adipiscing tellivizzle. Nullizzle sapien velizzle, volutpat, suscipit bow wow wow, gravida i'm in the shizzle, stuff. We gonna chung i saw beyonces tizzles and my pizzle went crizzle tortizzle. Gangster erizzle. Brizzle izzle dolizzle my shizz turpizzle tempizzle fo shizzle. Maurizzle fo shizzle nibh shizzlin dizzle gangsta. Own yo' izzle yo mamma. Yo the bizzle rhoncus away. In black habitasse platea black. Phat dapibizzle. Curabitur tellizzle urna, pretizzle eu, mattizzle pot, break yo neck, yall vitae, nunc. Mammasay mammasa mamma oo sa suscipizzle. Shizznit sempizzle fizzle shiz yo.
  </div>
</div>

但是，我最近阅读了很多有关floats的错误，过时，不宜使用等的文章，每个人都说应该使用display: inline-block。

问题：使用inline-block或不使用floats是否可以达到相同的效果？

最佳答案

但是，我最近阅读了很多有关浮子如何错误，过时，不应该使用的帖子，等等。


如果您正在寻找使用Flexbox的更现代解决方案，则其中之一。通过使用display:flex将内容包装在包装器中的方法可以达到预期的效果。

.wrapper{
  display:flex;
  flex-direction:row-reverse;
}

.right{
  background-color:pink;
}

.left{
  background-color:lightgreen
}

<div class="wrapper">
<div class='right'>HELLO WORLD!!!</div>
<div class='left'>
  <div class="ellipsize">Lorizzle ipsum shiznit black amizzle, fo shizzle adipiscing tellivizzle. Nullizzle sapien velizzle, volutpat, suscipit bow wow wow, gravida i'm in the shizzle, stuff. We gonna chung i saw beyonces tizzles and my pizzle went crizzle tortizzle. Gangster erizzle. Brizzle izzle dolizzle my shizz turpizzle tempizzle fo shizzle. Maurizzle fo shizzle nibh shizzlin dizzle gangsta. Own yo' izzle yo mamma. Yo the bizzle rhoncus away. In black habitasse platea black. Phat dapibizzle. Curabitur tellizzle urna, pretizzle eu, mattizzle pot, break yo neck, yall vitae, nunc. Mammasay mammasa mamma oo sa suscipizzle. Shizznit sempizzle fizzle shiz yo.
  </div>
</div>
</div>

关于html - 没有浮点数的CSS 2列布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49384703/