仿饿了么网页布局

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
阅读更多

没有更多推荐了,返回首页