如何在 css 中水平对齐 2 个内容块而不使用 <table>s

Question

我正在尝试将 2 个内容块横向放在一起。我不想使用 <table> 来实现这一点。

我有这个标记：

<div class="left-side float-left">Scope:</div>
<div class="right-side">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut porta lacus. Vestibulum dapibus pulvinar tellus sit amet commodo. In hac habitasse platea dictumst.</div>

objective:获取右侧内容块不换行 在较小的视口（在响应式设计中）的左侧内容块周围。

CSS 我试过了：

.left-side,
.right-side {
    /*float: left;*/
    display: inline-block;
    height: 100%;
    /*width: 50px;*/
}

.float-left {
    float: left;
    height: 100%;
    width: 50px;
}

Answer 1

Calc 目前得到了很好的支持。

width: calc( 100% - 50px);

http://jsfiddle.net/u2j3nLqo/1/

您可以设置 .right-side 来使用这个：

.right-side {
    display: inline-block;
    height: 100%;
    width: calc( 100% - 50px);
}

Answer 2

如果您可以更改标记，只需一行 CSS 就足以通过 flexbox 实现此目的。将这两个项目包装在父容器中。将 display: flex 设置为父元素。

.container {
  display: flex;
}
.left-side {
  margin-right: 10px;
}

<div class="container">
  <div class="left-side float-left">Scope:</div>
  <div class="right-side">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut porta lacus. Vestibulum dapibus pulvinar tellus sit amet commodo. In hac habitasse platea dictumst.</div>
</div>

如何在 css 中水平对齐 2 个内容块而不使用 <table>s

How to align 2 content blocks horizontally in css without using <table>s

html

css

css-float