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


相关推荐

  • 中英文切换资源文件的问题

    中英文切换资源文件的问题

    2021年8月17日
    68
  • excel 汉字转拼音「建议收藏」

    excel 汉字转拼音「建议收藏」Functionpinyin(pAsString)AsString’*************************************’版本说明:转载请保留此段注释’更新时间:2018年8月28日’作者:上海五航航空技术有限公司李晓锋’感谢:“在线汉语字典”的中文转拼音功能http://xh.5156edu.com/conversion.html,大大的加快了拼音的转换速度。’说明:本代码几乎包含了Excel表中能够出现的所有汉字(20830个汉字),去除了无法使用“在线汉语

    2022年6月21日
    55
  • c语言爱心代码详解_C语言程序源代码

    c语言爱心代码详解_C语言程序源代码1、love图案的C语言爱心代码C语言爱心代码如下:#include<stdio.h>intmain(){inti,j,k,n=0,x=0,y=50;//爱心的头部没有规律,所以直接打印printf(“\n\n\n\n\n”);printf(“lovelovelovelove\n”);printf(“lovelovelove

    2022年10月13日
    5
  • 集成灶功能图标解释_为什么不建议买集成灶

    集成灶功能图标解释_为什么不建议买集成灶GitLab Auto DevOps功能与Kubernetes集成教程

    2022年4月22日
    68
  • Linux netstat 命令安装

    Linux netstat 命令安装当服务器未安装 netstat 工具时 查看端口监听状态会提示如下报错 commandnotfo root VM 0 15 linux netstat an grep9200 bash netstat commandnotfo 如果要使用 netstat 命令 需要先安装工具 安装步骤如下所示 一 首先配置好本机的 yum 源 root VM 0 15 linux yumrepolista faste

    2025年10月31日
    3
  • 史上最全 XMind 8 快捷键大全「建议收藏」

    史上最全 XMind 8 快捷键大全「建议收藏」对于那3名小学生在我背后鬼鬼祟祟小声议论的这件事,其实我是知晓的。但我还是将注意力集中在眼前的屏幕上,力求表现得尽可能好一些,毕竟这局的形势尚未明朗,胜负依旧难分。又是一阵剧烈的连续按键,对方英雄终于败在我的剑下。随着身后的小学生团队发出“哇”的一声惊叹,我感受到了他们向我投来近乎崇拜的目光。我早已习惯小学生们的艳羡,以及被他们赋予的“大神”称号,当然还有他们对我惯常的提问,“大哥哥,怎…

    2022年5月22日
    47

发表回复

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

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