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

全栈程序员-站长 • 2021年7月20日上午8:00 • 未分类 • 阅读 91

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)

0 0

关于作者

全栈程序员-站长

133.5K 文章

3 粉丝

本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”

死锁，更新锁，共享锁，排它锁，意向锁，乐观锁，悲观锁等名词解释及案例详解

上一篇 2021年7月19日下午10:00

dialog使用案例，包含增加按钮关闭弹窗

下一篇 2021年7月20日上午8:00

[Java] volatile 详详解！[通俗易懂]

[Java] volatile 详详解！[通俗易懂]前言：要真正搞懂volatile的特性需要与JMM对比来看JMM（线程安全的保证）JMM：JAVA内存模型（javamemorymodel）是一种抽象概念，并不真实存在，它描述的是一组规则或规范，通过这组规范定义了程序中各个变量（实例字段，静态字段和构成数组对象的元素）的访问方式。JMM关于同步的规定线程解锁前，必须把共享变量的值刷新回主内存；线程加锁前，必须读取主内存的最…

全栈程序员-站长
2022年7月7日
17
MFC定时器SetTimer函数用法总结

MFC定时器SetTimer函数用法总结CWnd 类的 SetTimer 成员函数只能在 CWnd 类或其派生类中调用而 API 函数 SetTimer 则没有这个限制这是一个很重要的区别 1 启动定时器 nbsp nbsp nbsp nbsp nbsp nbsp 启动定时器就需要使用 CWnd 类的成员函数 SetTimer CWnd SetTimer 的原型如下 nbsp nbsp nbsp nbsp nbsp nbsp 参数 nIDEvent 指定一个非零的定时器 ID 参数 nElapse 指定间隔时间单位为毫秒参数 lp

全栈程序员-站长
2026年3月19日
5
十进制转换为二进制java_二进制转八进制算法

十进制转换为二进制java_二进制转八进制算法将十进制转换为二进制将二进制转换为十进制1.将十进制转换为二进制：思路：对十进制的数进行除2取余法：/***讲10进制转化为二进制*@paramde：待转换的十进制*@return：转换后的二进制（string）*/publicstaticStringDecimal2Binary(intde){

全栈程序员-站长
2022年10月18日
3
PCRE 简介

PCRE 简介介绍 PCRE nbsp PerlCompatib 是一个用 C 语言编写的正则表达式函数库本文简要介绍 PCRE 的编译和使用方法编译从 PCRE 官网下载后解压本人下的版本为 pcre2 10 21 仔细阅读 README 和 NON AUTOTOOLS BUILD 里面介绍了很多编译的方法由于本人需要在 VS 下开发因此选择 CMake 编译 nbsp 1

全栈程序员-站长
2026年3月19日
2
一个典型的晶体管开关电路

一个典型的晶体管开关电路

全栈程序员-站长
2021年12月17日
46
简单搞懂子网划分，学会子网划分这篇就够了（例题详解）

简单搞懂子网划分，学会子网划分这篇就够了（例题详解）搞定子网划分，网段地址，广播地址，可用地址范围，能够快速了解并学会子网划分！

全栈程序员-站长
2022年6月27日
195

发表回复

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