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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • jps 命令_jps只有一个jps进程

    jps 命令_jps只有一个jps进程简介jps(全称:JavaVirtualMachineProcessStatusTool)是java提供的一个用来显示当前所有java进程的pid的命令。unix系统里也有一个ps命令,用来显示当前系统的进程id及其基本情况。配置环境变量jsp命令的位置在JAVA_HOME/bin/jps下,如果使用sudoaptgetinstall、dpkg-i、yuminstall命令进行安装,会自动配置环境变量。如果手动解压,可以编辑~/.bashrc

    2022年9月19日
    0
  • Rest和RPC接口区别「建议收藏」

    Rest和RPC接口区别「建议收藏」接口调用通常包含两个部分,序列化和通信协议。常见的序列化协议包括json、xml、hession、protobuf、thrift、text、bytes等;通信比较流行的是http、soap、websockect,RPC通常基于TCP实现,常用框架例如dubbo,netty、mina、thrift首先解释下两种接口调用:Rest:严格意义上说接口很规范,操作对象即为资源,对资源的四种操作(p…

    2022年8月31日
    0
  • tp5 上传视频到七牛云

    tp5 上传视频到七牛云

    2021年10月28日
    55
  • JAVA Calendar详解

    JAVA Calendar详解(在文章的最后,将会介绍Date类,如果有兴趣,可以直接翻到最后去阅读)究竟什么是一个Calendar呢?中文的翻译就是日历,那我们立刻可以想到我们生活中有阳(公)历、阴(农)历之分。它们的区别在哪呢?比如有:月份的定义-阳`(公)历一年12个月,每个月的天数各不同;阴(农)历,每个月固定28天每周的第一天-阳(公)历星期日是第一天;阴(农)历,星期一是第一天实际上,在历…

    2022年6月12日
    25
  • MyBatis 所有的 jdbcType类型

    MyBatis 所有的 jdbcType类型MyBatis处理MySQL字段类型date与datetime1)DATETIME显示格式:yyyy-MM-ddHH:mm:ss时间范围:[‘1000-01-0100:00:00’到’9999-12-3123:59:59’]2)DATE显示格式:yyyy-MM-dd时间范围:[‘1000-01-01’到’9999-12-31’]3)TIMESTAMP显示格式:yyyy-MM-ddHH:mm:ss时间范围:[‘1970-01-0100:00:00’到’2037-12-

    2022年10月20日
    0
  • Qt 之 QThread(深入理解)

    Qt 之 QThread(深入理解)简述前面,我们介绍了QThread常用的两种方式:worker-object子类化QThread下面,我们首先来看看子类化QThread在日常中的应用。简述子类化QThread在主线程中更新UI正常结束线程更多参考一般情况下,QThread进行耗时操作的同时会与UI进行交互,比如:显示进度、旋转等待。。。进行友好型的交互,让用户知道当前的操作。子类化QThread我们以更新进度条为例,

    2022年5月28日
    40

发表回复

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

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