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


相关推荐

  • treap模版_bartender模板

    treap模版_bartender模板#include#include#include#include#include#include#include#include#include#include#include#include#include#include#includeusingnamespacestd;typedefintll;typedefunsignedlonglongu

    2025年7月22日
    0
  • VBS 代码合集(慎用,好玩)

    VBS 代码合集(慎用,好玩)玩玩就好啦记得关注哦一、你打开好友的聊天对话框,然后记下在你QQ里好友的昵称,把下面代码里的xx替换一下,就可以自定义发送QQ信息到好友的次数(代码里的数字10改一下即可).xx.vbs=>=—————————————————————————OnErrorResumeNextDimwsh,yesetwsh=createobject(“wscript.shell”)fori=1

    2022年6月5日
    812
  • vmware15最新激活码2021【中文破解版】[通俗易懂]

    (vmware15最新激活码2021)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月26日
    49
  • tabnine专业版激活码【2021最新】

    (tabnine专业版激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月21日
    276
  • jbpm工作流 php,jBPM工作流组件

    jbpm工作流 php,jBPM工作流组件jBPM工作流组件如下图所示-1.开始事件它是该过程的起始节点。每个进程只有一个启动节点。此节点仅包含一个没有任何传入连接的传出连接。它具有以下属性:Id:节点的ID,它也应该是独一无二的。Name:节点的名称。2.结束事件它是流程的结束节点。进程可以包含多个End事件。此节点仅包含一个传入连接,不包含传出连接。它具有以下属性:Id:节点的ID,它也应该是独一无二的。Name:节点…

    2022年9月10日
    2
  • 基于HL-1开发板开发RFID(RC522模块)射频电路基础

    基于HL-1开发板开发RFID(RC522模块)射频电路基础基于HL-1学习版开发RFID射频首先先看学习版的原理图和RC522模块的原理图:图片中重点写出引脚的相应接口名称。—————————————————————手动分割线———————————————————–连线部分详解:关于淘宝上面买的射频模块差不多都是RC522模块:如何连线我认为连线部分是自由的,在P口充足的情况下,想这么连这

    2022年7月14日
    16

发表回复

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

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