html两个div占满一行,设置div背景色,用float浮动并让键值对形式的文字键右对齐,值左对齐

html两个div占满一行,设置div背景色,用float浮动并让键值对形式的文字键右对齐,值左对齐

想实现下图所示的效果:

html两个div占满一行,设置div背景色,用float浮动并让键值对形式的文字键右对齐,值左对齐

代码:

<!DOCTYPE html>
<html>
<body>

<div >
   <div style="float:left;width:50% ;background-color:red">
       <span style="float:right; padding-right:5%">key1:
       </span>
   </div>
   <div style="float:right ;width:50%;background-color:blue">
       <span style="float:left;padding-left:5%"> 
          value1
       </span>
   </div>
</div>
<div style="padding-left:10%">22<div>
<div >
   <div style="float:left;width:50% ;background-color:red">
       <span style="float:right; padding-right:5%">key111111:
       </span>
   </div>
   <div style="float:right ;width:50%;background-color:blue">
       <span style="float:left;padding-left:5%"> 
          value1111111
       </span>
   </div>
</div>
<div >
   <div style="float:left;width:50% ;background-color:red">
       <span style="float:right; padding-right:5%">key22222:
       </span>
   </div>
   <div style="float:right ;width:50%;background-color:blue">
       <span style="float:left;padding-left:5%"> 
          value22222
       </span>
   </div>
</div>

</body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/106252.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • MongoDB获得短暂的

    MongoDB获得短暂的

    2021年12月17日
    46
  • ssm整合RabbitMQ(一)「建议收藏」

    ssm整合RabbitMQ(一)「建议收藏」首先说一下RabbitMQ的配置安装好RabbitMQServer之后访问http://localhost:15672/开始首先在Admintab选项中新建一个vh,这个Name需要在后期的代码配置中用到。之后需要给该VH配置一个权限然后配置交换选择Exchangestab将Exchanges与刚才建立的VH绑定然后命名一个交换名字,这个名字在后期的…

    2022年5月23日
    36
  • Python Faker的使用,你了解多少呢?

    Python Faker的使用,你了解多少呢?

    2021年5月24日
    161
  • netty bytebuffer_计算系统基础答案详解

    netty bytebuffer_计算系统基础答案详解1.ByteBuf与NIO中的ByteBuffer类似,Netty中以ByteBuf作为它的字节容器。ByteBuf相当于ByteBuffer的升级。有兴趣可以看一看&amp;amp;amp;amp;gt;&amp;amp;amp;amp;gt;之前NIO中的ByteBuffer的文章ByteBuf维护了两个不同的索引:一个用于读取,一个用于写入。读取时,读索引hi递增读取的字节数。写入时,写索引会递增写入的字节数。初始时两个索引都为0。当两个索引…

    2022年9月15日
    2
  • java中什么是过滤器_JAVAweb过滤器

    java中什么是过滤器_JAVAweb过滤器【扩展】过滤器:Filter概念:对目标资源的请求和响应进行过滤截取。在请求到达servlet之前,进行逻辑判断,判断是否放行到servlet;也可以在一个响应response到达客户端之前进行过滤,判断是否允许返回客户端。场景:(用户授权的过滤器:判断用户是否有权限请求界面)(日志信息的过滤器:过滤用户在网站的所有请求,记录轨迹 )(负责解码的过滤器:规定请求的解码方式)备注:过滤…

    2022年8月23日
    5
  • prometheus监控日志告警_undo terminal monitor

    prometheus监控日志告警_undo terminal monitorkubernetes之prometheus监控第二篇-alertmanager监控告警:  在前期的博文中,我已经简单的介绍过了prometheus的安装,以及通过grafana来实施监控。这篇博文,我们更深入的介绍一下prometheus的监控。本篇博文主要分为以下几个知识点:1.使用prometheus监控ceph存储;2.学习简单的PromQL语言,在grafana里面根据业务自定…

    2022年10月3日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号