今天看啥
    热点:

      天发国际娱乐官网:2017-03-2310:32:01据有关媒体报道,韩国政府向世贸组织投诉其有关产业在华遭到抵制,认为中方有关措施涉嫌违反世贸承诺,请问韩方所述情况是否属实?具体情况是怎样的?2017-03-2310:36:51我们注意到媒体的报道。

      CSS宽高等比布局的方法,css布局


      宽度是高度的两倍(等比缩放)

      实现思路: 以父级元素为基准, 子级 width:100%; (也就是父级宽度的100%), padding-top:50% (也就是父级宽度的50%,根据css规范, padding用百分比表示的话, padding: 100%等于父元素的宽度);

      为什么不直接`width: 50%; height: 50%;?

      那样高度就成了父级高度的50% (不合题意,除非父级宽高相等);

      原题目:

      1. 红色块级元素垂直居中于屏幕中央;
      2. 红色块级元素距离屏幕左右边距各20px;
      3. 红色块级元素里面的内容水平垂直居中;
      4. 红色块级元素的高度始终是红色块级元素宽度的50%。

      红色部分宽高之比2:1

      源码:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>宽高比例固定</title>
          <style>
      
              .father{
                  overflow: hidden;
                  position: absolute;
                  left: 10px;
                  right: 10px;
                  top: 50%;
                  transform: translateY(-50%);
                  background-color: #0c8ac5;
              }
      
              .son{
                  width: 100%;
                  padding-top: 50%;
                  background-color: #c03035;
      
              }
              span{
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  font-size: 20px;
                  color: #D8D8D8;
              }
      
              img{
                  float: left;
                  margin-right: 10px;
                  border: 2px solid #fdf6e3;
              }
      
          </style>
      </head>
      <body>
          <section class="father">
              <div class="son"><span><img src="http://www.1click-soft.com/tfgjylgw/t0167d9ebac0d0e1828.jpg" alt="" width="200px"> 王也, 武当派弟子(现已离开武当),八奇技之一风后奇门的继承人,靠占卜悟出天道,却又作出甘于投身乱世的选择。外表一副老好人的温良相,谦谦有礼如温吞水般,做事也经常是一副没精打采,貌似没睡醒的样子。优哉游哉还脾气软,代表举动经常是歉意笑着作出让步。似乎对什么都无所谓,一副悠然道人之姿,但是在涉及到家人安危时毫不含糊,甚至为此做出过有失冷静的举动。不小心爆粗都会拜祖道歉的出家人,实力在后生一辈中甚至称得上头筹,暂时只有一次完全没预料到地阴沟里翻船。</span></div>
          </section>
      </body>
      </html>

      以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

      www.1click-soft.comtruehttp://www.1click-soft.com/CSSjc/1314443.htmlTechArticleCSS宽高等比布局的方法,css布局 宽度是高度的两倍(等比缩放) 实现思路: 以父级元素为基准, 子级 width:100%; (也就是父级宽度的100%), padding...

      相关文章

        暂无相关文章

      帮客评论

      视觉看点
      百度 360 搜狗