html - LI 中带有图标图像的响应式文本宽度

Question

我有一个产品列表，我想用缩略图图标显示 在每个元素的左侧。

如何在不换行的情况下将产品描述显示在右侧 较小屏幕上的文本。

HTML

<ul>
    <li class="cf">
      <span id="customizeImage1" class="product-customize-image"></span>
      <div class="product-menu-txt">
        <a href="/Product/Customize/769497">Friend Maker - Serves 8-10</a>
        ($14.99)<br>
        6 Donuts<br>
        6 Bagel &amp; Cream Cheese - 1 (8oz) tub<br>
        An assortment of our most favored varieties.
      </div>
    </li>
  </ul>

CSS

* {
  margin:0;
  padding:0;
  font-family: Tahoma,Sans-Serif;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

li {
  width: 100%;
  list-style-type: none;
  padding: 10px 0;
}

.product-customize-image {
  width:120px;
  height:120px;
  background:red;
  display:block;
  float:left;
  margin: 0 10px;
}

.product-menu-txt {
  float: left;
  width: 50%;
}

http://jsbin.com/girum/4/edit

Answer 1

最简单的方法是使用 table 布局，其中图像和文本显示为 table-cell。

相关 CSS:

li {
  display: table;
}

.product-customize-image {
  display:table-cell;
}

.product-menu-txt {
  display: table-cell;
  padding-left: 8px;
}

演示:http://jsbin.com/banuvoharo/1/