zoukankan      html  css  js  c++  java
  • 浮动——小米手机案例

      如果我们想要做这样的布局,该怎么做捏?

      和往常一样,我们先整个标准流的父盒子,然后在父盒子里划分成两块,用两个盒子填充

       我们设计一个大盒子里面套两个小盒子,给他们设置宽高和背景色,给两个小盒子设置左浮动

       这是效果图,我们可以知道左青龙只需放张图片即可,右白虎需要放很多小盒子

       我们给right盒子里面放上8个小盒子,这里用到子代选择器,只选择right的亲儿子,给他们指定宽高和左浮动

       但问题是现在这些小盒子都是紧挨在一起的,我们想要他们有点小距离该怎么实现呢

      我们给每个盒子设置左边距,这样就完成了浮动盒子的左边留有空隙。

      再给每个小盒子指定下边距,这样上下也有空隙了

       走着~

      盒子里面的内容就是我们之前的小米盒子案例了,very nice

  • 相关阅读:
    to_char &&to_date
    java中Integer 与 String 类型的 相互 转换
    group by 的用法
    谈 计算时间的天数差
    领域建模
    Java Classloader详解
    阿里巴巴Java招聘
    Maven Archetype
    负载均衡
    Maven
  • 原文地址:https://www.cnblogs.com/qq2210446939/p/13993404.html
Copyright © 2011-2022 走看看