显示：单行表格单元格和文本（响应式设计）

Question

我希望列表项目在左侧有一个个人资料图片，在右侧有名字。该名称应与overflow:hidden一行。

如何通过响应宽度和高度来完成？我设法使用像素但不是％。

实施例：

JSFIDDLE：http://jsfiddle.net/NjqpC/

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
.first {
  width: 8%;
  height: 3%;
}
.second {
  list-style: none;
  margin: 0;
  padding: 0;
}
.third {
  border: .1em solid;
  font-size: .8em;
  max-height: 100%;
  display: table;
}
.third img {
  max-width: 100%;
  display: table-cell;
}
.third span {
  display: table-cell;
  vertical-align: middle;
  overflow:hidden;
}

<div class='first'>
  <ul class='second'>
    <li class='third'>
      <img src='http://static.wikiartis.com/img/profile-small.gif'>
      <span>First-Surname Family-name</span>
    </li>
  </ul>
</div>

Answer 1

在第三课中，添加“white-space：nowrap”

.third {
    white-space: nowrap;
}

包含宽度和高度的类需要获得溢出：隐藏

.first {
    overflow: hidden;
}

在这种情况下，这就是div.first。

为了使图像正常工作，我给了所有父母一个高度。每个父母除了第一个以外100％。

我给了img以下样式：

.third img {
    display: table-cell;
    height: 100%;
    width: auto;
}

请参阅fiddle

添加白色空间：nowrap;你告诉文本它可能不会包裹多行。这意味着文本将始终保持在同一行。 source