Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

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

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

作者头像

全栈程序员站长

发布于 2022-06-30 05:36:35

发布于 2022-06-30 05:36:35

2.1K00

代码可运行

举报

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

想实现下图所示的效果：

代码：

<!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.cn/106252.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021年7月2，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

鹅厂写码13年，我总结的程序员高效阅读方法论

进程，线程，协程 - 你了解多少？

微服务与分布式系统设计看这篇就够了！

腾讯文档表格卡顿指标探索之路

从Hadoop1.0到Hadoop2.0架构的优化和发展探索详解

微服务架构：由浅入深带你了解底层注册中心

第4天：JS入门-给div设置宽高背景色

今天学习了js入门课程，听的不多，做了个小练习，给div设置宽高、背景色。一点点都是进步。核心代码如下：

半指温柔乐

2018/09/11

3.9K0

第4天：JS入门-给div设置宽高背景色

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

题目要求：针对如下DOM结构，编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为200px，right宽度为300px，main处在中间，宽度自适应。要求：允许增加额外的DOM节点，但不能修改现有节点顺序。

全栈程序员站长

2022/09/07

1K0

web前端网页设计制作_网页制作教程

java https 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/183837.html原文链接：https://javaforall.cn

全栈程序员站长

2022/09/27

2.6K0

CSS中float属性会使元素浮动，使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

WindRunnerMax

2020/08/27

1.2K0

float现象（是什么,脱标,排序,贴靠,字围,高度问题）

1：网页的布局方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{padding: 0px;margin: 0px;} .bo

贵哥的编程之路

2020/11/03

5250

float现象（是什么,脱标,排序,贴靠,字围,高度问题）

如何理解css中的float

css java html https 网络安全

最近一段时间一直在为一个即将上线的新站进行一些前端开发。自然，对CSS的使用是必不可少的了。我们在CSS 中很多时候会用到浮动来布局。常见的有 float:left 或者 float:right 。简单点来说，前者是左浮动(往左侧向前边的非浮动元素飘，全是飘得元素的话，就按照流式来浮动从左到右，放不下则换行)，后者是右浮（往右飘）动。

全栈程序员站长

2021/12/21

1.1K0

css中清除浮动float 上

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>65-清除浮动方式一</title> <style> *{ margin: 0; padding: 0; } .box1{ height: 20px; background-color: red;

贵哥的编程之路

2020/10/28

8550

前端基础之CSS_2

标签与标签之间的margin是相对的，它的上下左右有时候只能有2处可以确定，另外2边由于没有参照不会有间隔，所以使用时候一般不会全部上下左右都写上。要表示那一边就写上那一边。

py3study

2020/01/15

4190

web前端 html+css+javascript网页设计实例企业网站制作

https 网络安全 java html

声明：案例中的图片素材来源于网络案例资料源码下载链接：https://pan.baidu.com/s/1ThL8dXKbjmCV59_Pms3oPw 提取码：na30

全栈程序员站长

2022/07/04

9110

web前端 html+css+javascript网页设计实例企业网站制作

CSS border详解+padding详解+margin详解

特点：记住哈,一个所谓的边框必须有三样. 第一;这个边框是什么颜色的. 第二：这个边框的样式是什么样的？第三;这个边框有多少的厚度.

贵哥的编程之路

2020/11/03

9090

CSS border详解+padding详解+margin详解

CSS 特征布局实例 - 导航栏、新闻列表、淘宝布局

block display point text 布局

重点：这里不能使用float:left的方式，因为这种方式不方便于居中。如果使用偏移的方式居中，当页数增加的时候，可能就不居中了。

Devops海洋的渔夫

2019/06/02

1.9K0

通过HTML和CSS设计一个静态网页（练习实例，附完整代码）

https 网络安全 java github git

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

全栈程序员站长

2022/09/29

5.6K0

通过HTML和CSS设计一个静态网页（练习实例，附完整代码）

lesson01~lesson02基础 <!DOCTYPE html> <html lang="en">  <head>  <meta charset="UTF-8"> <title>网页的标题</title> <!-- link标签，是用来引入一个外部的css文

周小董

2019/03/25

2.4K0

html使用display:inline-block实现标签右对齐，值左对齐效果。和设置div宽度，并居中显示。嵌套div的里层div文字居中显示

https java 网络安全

总结：使用标签前要了解此标签的属性有哪些，比如span标签没有width属性，所以即使设置了宽度也不会起作用，这是小编经常犯的错误。

全栈程序员站长

2022/06/30

5.5K0

html使用display:inline-block实现标签右对齐，值左对齐效果。和设置div宽度，并居中显示。嵌套div的里层div文字居中显示

注意点: 1.浮动流中没有居中对齐, 也就是没有center这个取值 2.在浮动流中是不可以使用margin: 0 auto;

贵哥的编程之路

2020/10/28

9620

初识HTML(三)---div块级元素以及浮动和定位(超详细带演示)

vue.js c++网站

可以看到我们定义的样式是三个正方形的块style(css)后面会细讲 style="width: 600px;height: 600px;background-color: black; 分别对应宽高和背景色

代码哈士奇

2021/01/26

9050

初识HTML(三)---div块级元素以及浮动和定位(超详细带演示)

仿英雄联盟网页HTML代码学生网页设计与制作期末作业下载大学生网页设计与制作成品下载 DW游戏介绍网页作业代码下载

javascript html css jquery java

✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发

IT司马青衫

2022/08/14

1.1K0

仿英雄联盟网页HTML代码学生网页设计与制作期末作业下载大学生网页设计与制作成品下载 DW游戏介绍网页作业代码下载

HTML5+CSS3+JavaScript从入门到精通-10

HTML5+CSS3+JavaScript从入门到精通作者：王征，李晓波第十章 CSS盒子模型和布局案例 10-01 content内容 <!DOCTYPE html>  <!-- content(内容):width, height, overflow padding(内边距):内容和边框直接的空间，可被看做是内容content的背景区域。（padding-top, padding-bottom, padding-left, padding-right,

qiqi_fu

2021/12/03

3300

HTML5+CSS3+JavaScript从入门到精通-10

Day5:html和css

如何实现盒子居中问题，要让盒子实现水平居中，要满足是快级元素，而且盒子的宽度要定义。然后数值为auto即可。

达达前端

2019/07/03

9180

HTML, CSS学习笔记（完整版）[通俗易懂]

c++html5 http https 网络安全

.htm是早期的后缀。由于那时仅仅能支持长度为3的后缀。因此html与htm是一样的。

全栈程序员站长

2022/07/10

8260

相关推荐

第4天：JS入门-给div设置宽高背景色

更多 >