0

I want to have list item that has a profile picture in the left hand side and Name in the right hand side. The name should be on a single line with overflow:hidden.

How can this be done with responsive widths and heights? I managed to do this with pixels but not with %.

Example: example

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>
4

1 回答 1

1

在第三类中，添加“white-space: nowrap”

.third {
    white-space: nowrap;
}

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

.first {
    overflow: hidden;
}

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

为了让图像也能正常工作，我给了所有父母一个高度。100% 为除第一个以外的每个父母。

我给 img 赋予了以下样式：

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

见小提琴

通过添加空格： nowrap; 你告诉文本它可能不会覆盖多行。这意味着文本将始终保持在同一行。资源

于 2013-09-16T11:40:13.280 回答