CSS 如何实现“品”字布局？

时间：2023-02-09 13:07:37浏览次数：35

标签：float width 布局 100px 如何 background margin CSS left

实现代码如下：

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>品字布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      overflow: hidden;
    }

    div {
      margin: auto 0;
      width: 100px;
      height: 100px;
      background: red;
      font-size: 40px;
      line-height: 100px;
      color: #fff;
      text-align: center;
    }

    .div1 {
      margin: 100px auto 0;
    }

    .div2 {
      margin-left: 50%;
      background: green;
      float: left;
      transform: translateX(-100%);
    }

    .div3 {
      background: blue;
      float: left;
      transform: translateX(-100%);
    }
  </style>
</head>

<body>
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</body>
</html>

实现效果如下：

CSS 如何实现“品”字布局？_html

还有一种全屏版的"品"字布局。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>品字布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 100%;
      height: 100px;
      background: red;
      font-size: 40px;
      line-height: 100px;
      color: #fff;
      text-align: center;
    }

    .div1 {
      margin: 0 auto 0;
    }

    .div2 {
      background: green;
      float: left;
      width: 50%;
    }

    .div3 {
      background: blue;
      float: left;
      width: 50%;
    }
  </style>
</head>

<body>
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</body>

</html>

实现效果如下：

CSS 如何实现“品”字布局？_面试_02

标签：float,width,布局,100px,如何,background,margin,CSS,left
From： https://blog.51cto.com/u_15959833/6046856

计算下面CSS代码中红色和绿色面积分别是多少？
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Co......
CSS 如何实现“圣杯”布局？
“圣杯”布局是一种典型的网页布局结构，如下所示：实现方式有多种，下面一一给出代码实现。1.Flex布局来实现<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"......
如何实现div垂直居中，左右10px，高度始终为宽度一半？
实现一个div垂直居中,其距离屏幕左右两边各10px,其高度始终是宽度的50%，同时div中有一个文字A，文字需要水平垂直居中。面试官出这种简单的题，实际面试官想要考察的是：paddin......
如何用CSS画一个五角星？
对于这个五角星而言，我们可以拆分成三个部分，如下所示：将五角星分成三部分，对于最上面的三角，利用边框就可以快速实现，这个不难。但是下面的两个如何实现呢？其实也非常的简单，想一......
浮动布局有哪些优点？有什么缺点？清除浮动有哪些方式？
浮动布局简介：当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变......
CSS 中最后一行中元素如何向左对齐
自从CSS3.0出来以后，很多的页面布局都用弹性布来实现，特别是移动端，但是弹性布局也有它的弊端，就是最后一行如果数量不够，不会像我们正常的想法一样居左对齐。效果如下：代码如下：......
微信开放平台之第三方平台开发，模板小程序如何提交？
大家好，我是悟空码字今天天气晴朗，阳光普照。因为疫情影响，小羊人的增多，街上放眼望去，人烟稀少。楼下除了几个十一二岁的小男孩在玩耍，也没有像往日老人悠闲打牌、小孩嬉戏那般......
css3溢出隐藏的方法
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow: hidden;text-overflow......
MySQL 如何实现表的创建、复制、修改与删除
MySQL中如何利用代码完成表的创建、复制、修改和删除？下面总结了在创建表的时候各字段的含义以及注意哪些问题，复制和修改及删除常用的代码。一、创建表--创建新表，如果存在......
CSS 3.0实现文字悬停特效
给大家分享一个用CSS3.0实现的网页特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">......

CSS 如何实现“品”字布局？

相关文章

赞助商

阅读排行