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


相关推荐

  • 《深入浅出MFC》观后有感

    《深入浅出MFC》观后有感    《深入浅出MFC》观后有感本文原创,如需转载,请注明出处!     好几年前我曾经买过这本书,知道它是本好书,在匆匆走马观看一遍后,便将它束之高阁,后来有友人借之,不想几经辗转,最终不知我的这本好书花落谁家了。这段时间有空,得知一位友人也买了此书,便借来再读。再读的同时,回想这几年使用MFC的经历,顿觉获益良多,深受启发,遂成此文。          翻开此书,到内容简介后面一页

    2022年6月22日
    28
  • 页面刷新的reload()和refresh()方法有什么不同

    页面刷新的reload()和refresh()方法有什么不同window.reload是重新加载当前需要的所有内容,也就包括页面和后台的代码,此过程中实际上是从后台重新进行操作;window.Refresh是刷新,保留之前的缓存内容,重新加载页面,之前存在的东西不会动,没加载上来的东西继续加载,也会去加载后台代码内容的。

    2022年7月18日
    53
  • pycharm中十个常用的快捷键「建议收藏」

    pycharm中十个常用的快捷键「建议收藏」1、ctrl+shift+A:万能命令行2、shift两次:查看资源文件3、ctrl+D:复制当前光标所在行4、ctrl+R:快速替换(一般不用)5、ctrl+/:用于注释或取消注释6、shift+tab:取消缩进(tab:缩进)7、Alt+Shift+上下键:选中代码移动8、…

    2022年8月26日
    2
  • 总结一下SQL语句中引号()、quotedstr()、()、format()在SQL语句中的用法[通俗易懂]

    总结一下SQL语句中引号()、quotedstr()、()、format()在SQL语句中的用法[通俗易懂]ViewCode总结一下SQL语句中引号(”)、quotedstr()、(””)、format()在SQL语句中的用法以及SQL语句中日期格式的表示(#)、(””)在Delphi中进行字符变量连接相加时单引号用(”””),又引号用(””””)表示首先定义变量varAnInt:integer=123;//为了方便在此都给它们赋初值。虽然可能在引赋初值在…

    2022年10月17日
    0
  • mysql jdbc下载(mysql下载哪个版本)

    https://dev.mysql.com/downloads/connector/j/

    2022年4月16日
    61
  • ConfigurationManager.ConnectionStrings 属性[通俗易懂]

    ConfigurationManager.ConnectionStrings 属性[通俗易懂]publicstaticConnectionStringSettingsCollectionConnectionStrings{get;}App.config1<?xmlversion=”1.0″encoding=”utf-8″?>2<configuration>3<startup>4&lt…

    2022年5月21日
    140

发表回复

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

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