仿饿了么网页布局

1.在页面中常遇到两个div排在一排的情况

    <div class="head">
      <div class="content-left"></div>
      <div class="content-right"></div>
    </div>

一种解决方法

.head .content-left {
    display: inline-block;
}
.head .content-right {
    display: inline-block;
}

2.在页面中我们遇到图片旁的字体会离图片有一小段距离，如下：

解决方法：可以事先在两者的父元素上，将font-size: 0,后面用到字体大小时再设置

3.如何实现非常多的字在一行显示不完，显示省略号，如下：

关键的css设置：

      white-space: nowrap
      overflow: hidden
      text-overflow:ellipsis