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

最新推荐文章于 2023-02-25 22:50:17 发布

原创最新推荐文章于 2023-02-25 22:50:17 发布 · 4.2k 阅读

2 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

5 篇文章

订阅专栏

本文通过示例介绍了如何使用HTML和CSS实现特定的布局效果，包括如何让不同颜色的区块并排显示，并保持一定的间距。

想实现下图所示的效果：

代码：

<!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>