当前位置: 首页 > news >正文

用HTML的原生语法实现两个div子元素在同一行中排列

代码如下:

<div id="level1" style="display: flex;"><div id="level2-1" style="display: inline-block; padding: 10px; border: 1px solid #ccc; margin: 5px;">这是第一个元素。</div><div id="level2-2" style="display: inline-block; padding: 10px; border: 1px solid #ccc; margin: 5px;">这是第二个元素。</div>
</div>

当外层的父元素的背景设为黑色,字体为白色的情况下,效果如下:
在这里插入图片描述
当然可以把边框去掉,去掉边框的代码如下:

<div id="level1" style="display: flex;"><div id="level2-1" style="display: inline-block; padding: 10px; margin: 5px;">这是第一个元素。</div><div id="level2-2" style="display: inline-block; padding: 10px; margin: 5px;">这是第二个元素。</div>
</div>

当外层的父元素的背景设为黑色,字体为白色的情况下,效果如下:
在这里插入图片描述

相关文章:

用HTML的原生语法实现两个div子元素在同一行中排列

代码如下&#xff1a; <div id"level1" style"display: flex;"><div id"level2-1" style"display: inline-block; padding: 10px; border: 1px solid #ccc; margin: 5px;">这是第一个元素。</div><div id"…...

C++进阶--map和set的介绍及使用

map和set的介绍及使用 一、关联式容器与键值对关联式容器键值对pair树形结构的关联式容器 二、set2.1 set的介绍2.2 set的使用2.2.1 set的模板参数列表2.2.2 set的构造2.2.3 set的迭代器2.2.4 set的容量2.2.5 set修改操作2.2.6 set的使用举例 三、multiset3.1 multiset的介绍3.…...

MIML-DA

图3呢&#xff1f;且作者未提供代码...

[ROS2 Foxy]#1.3 安装使用 turtlesim

官网教程: https://docs.ros.org/en/foxy/Tutorials/Turtlesim/Introducing-Turtlesim.html 1.turtlesim安装和使用 turtlesim是一个轻量级的模拟程序,用来学习ROS2 .通过turtlesim来介绍ROS2在一个基础的水平上都要做了那些事,以此让我们了解将来在真的 robot或者模拟器上使用…...

嵌入式培训机构四个月实训课程笔记(完整版)-Linux系统编程第三天-Linux进程(物联技术666)

更多配套资料CSDN地址:点赞+关注,功德无量。更多配套资料,欢迎私信。 物联技术666_嵌入式C语言开发,嵌入式硬件,嵌入式培训笔记-CSDN博客物联技术666擅长嵌入式C语言开发,嵌入式硬件,嵌入式培训笔记,等方面的知识,物联技术666关注机器学习,arm开发,物联网,嵌入式硬件,单片机…...

1-01初识C语言

一、概述 C语言是贝尔实验室的Ken Thompson&#xff08;肯汤普逊&#xff09;、Dennis Ritchie&#xff08;丹尼斯里奇&#xff09;等人开发的UNIX 操作系统的“副产品”&#xff0c;诞生于1970年代初。 Thompson和Ritchie共同创作完成了Unix操作系统&#xff0c;他们都被称为…...

Python字符串

定义字符串 Python中要定义一个字符串&#xff0c;有比较多的一种方式。 示例代码&#xff1a; s "你好&#xff0c;张大鹏" print(s, type(s))s 你好&#xff0c;张大鹏 print(s, type(s))s """你好&#xff0c;张大鹏""" prin…...

PHP 基础编程 1

文章目录 前后端交互尝试php简介php版本php 基础语法php的变量前后端交互 - 计算器体验php数据类型php的常量和变量的区别php的运算符算数运算符自增自减比较运算符赋值运算符逻辑运算 php的控制结构ifelseelse if 前后端交互尝试 前端编程语言&#xff1a;JS &#xff08;Java…...

Android studio BottomNavigationView 应用设计

一、新建Bottom Navigation Activity项目: 二、修改bottom_nav_menu.xml: <itemandroid:id="@+id/navigation_beijing"android:icon="@drawable/ic_beijing_24dp"android:title="@string/title_beijing" /><itemandroid:id="@+i…...

51单片机串行口相关知识

51单片机串行口相关知识 串行通信概念 计算机与外部通信方式就两种&#xff1a; 并行通信串行通信 两种通信方式的特点以及适用场景&#xff1a; 名称特点适用场景并行通信速度快&#xff0c;效率高&#xff0c;成本高适合短距离高速通信&#xff0c;如计算机内部各硬件之…...

IDEA 每次新建工程都要重新配置 Maven的解决方案

文章目录 IDEA 每次新建工程都要重新配置 Maven 解决方案一、选择 File -> New Projects Setup -> Settingsfor New Projects…二、选择 Build,Execution,Deployment -> Build Tools -> Maven IDEA 每次新建工程都要重新配置 Maven 解决方案 DEA 每次新建工程都要…...

SecOC中新鲜度值和MAC都按照完整的值来生成,但是在发送和认证的时候只会截取一部分。这边截取的部分一般取多长?由什么参数设定?

新鲜度值(Freshness Value, FV)和消息验证码(Message Authentication Code, MAC)是SecOC协议中用于保证数据的真实性和新鲜度的重要信息。它们的长度取决于不同的因素,如加密算法、安全级别、通信带宽等。 一般来说,FV和MAC的长度越长,安全性越高,但也会占用更多的通信…...

信源编码与信道转移矩阵

目录 一. 信息论模型 二. 点对点通信模型 三. 信源编码 四. 信道转移矩阵 4.1 二进制对称信道 4.2 二进制擦除信道 五. 小结 &#xff08;1&#xff09;信道直射与反射 &#xff08;2&#xff09;信道散射 &#xff08;3&#xff09; 信道时变性 一. 信息论模型 194…...

React 实现拖放功能

介绍 本篇文章将会使用react实现简单拖放功能。 样例 布局侧边栏拖放 LayoutResize.js import React, {useState} from "react"; import { Button } from "antd"; import "./LayoutResize.css";export const LayoutResize () > {const […...

马克思主义基本原理笔记

马克思主义哲学、政治经济学、科学社会主义理论 哲学 马克思主义中国化的理论成果&#xff1a;毛泽东思想、邓小平理论、三个代表重要思想、科学发展观 物质和意识哪个是本原&#xff0c;是哲学的基本问题 辩证法认为世界上的事物都是相互联系的、运动发展的&#xff0c;形…...

Vue+JavaSpingBoot笔记(1)

一、前后端通信参数问题 1.集合【字典】类型 Vue前端传递参数: export default {methods: { test(){// 将 filteredData 中的每一行值放入 newData 对象数组中 const newData filteredData.map(item > ({key1: item.Value1,key2: item.Value2,key3: "测试"}));r…...

10-单例模式(Singleton)

意图 保证一个类只有一个实例&#xff0c;并提供一个访问它的全局访问点 实现 1 懒汉式&#xff0c;线程不安全 public class Singleton { private static Singleton instance; private Singleton (){} public static Singleton getInstance() { if (instance null) {…...

C++ 求一个数是否是丑数。

#include<string.h> #include <iostream> using namespace std; int isChou(int num) { if (num < 0) { return 0; } while (num % 2 0) { // 不断除以2&#xff0c;直到不能整除为止 num / 2; } while (num % 3 0) { // 不断除…...

SpringCloud系列篇:核心组件之注册中心组件

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于SpringCloud的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.注册中心组件是什么 二.注册中心…...

通过IP地址防范钓鱼网站诈骗的有效措施

随着互联网的普及&#xff0c;钓鱼网站诈骗成为一种广泛存在的网络犯罪行为。通过冒充合法网站&#xff0c;攻击者试图窃取用户的敏感信息。本文将探讨如何通过IP地址防范钓鱼网站诈骗&#xff0c;提供一系列有效的措施&#xff0c;以加强网络安全&#xff0c;保护用户免受诈骗…...

Redis分布式锁进阶第一二十五篇

Redis分布式锁进阶第二十五篇&#xff1a;联锁深度拆解 多资源交叉死锁根治 复杂业务多级加锁绝对有序方案一、本篇前置衔接 第二十四篇我们完成了全系列终局复盘&#xff0c;整理了故障排查SOP与企业级落地铁律。常规单资源锁、热点分片锁、隔离锁全部讲透&#xff0c;但真实…...

终极指南:使用Tinke轻松探索和修改NDS游戏资源

终极指南&#xff1a;使用Tinke轻松探索和修改NDS游戏资源 【免费下载链接】tinke Viewer and editor for files of NDS games 项目地址: https://gitcode.com/gh_mirrors/ti/tinke 你是否曾经好奇任天堂DS游戏内部是如何组织的&#xff1f;想要提取游戏中的精美图片、动…...

Ubuntu 20.04上virt-manager报GDBus错误?别慌,三步排查法搞定它

Ubuntu 20.04 virt-manager报GDBus错误的深度排查指南 当你正准备用virt-manager管理KVM虚拟机时&#xff0c;突然弹出一个令人困惑的GDBus错误——这种场景对于Linux虚拟化用户来说并不陌生。这个看似简单的错误背后&#xff0c;其实涉及Linux桌面环境中多个关键组件的协同工作…...

餐饮排烟5大误区,避开少走弯路

做餐饮这些年&#xff0c;见过太多后厨排烟出问题的门店。每家厨房格局、业态不同&#xff0c;排烟遇到的麻烦也五花八门。结合实操经验&#xff0c;整理出餐饮排烟最容易踩的 5 个坑&#xff0c;附上实用解决办法&#xff0c;看完能避开不少问题。一、居民区门店&#xff1a;大…...

Power Query处理月度报表,遇到数据有null怎么办?详解【标准】运算与自定义列的计算逻辑差异

Power Query空值处理实战&#xff1a;标准运算与自定义列的计算逻辑深度解析 财务总监Lisa盯着屏幕上满是错误标记的月度汇总报表&#xff0c;眉头紧锁。她刚刚用Power Query合并了六个部门的销售数据&#xff0c;却发现总金额列出现了大量意料之外的null值——这直接导致季度预…...

怎样快速删除背景?2026年免费工具实测对比,找到最简单的抠图方法

图片背景删除已经成为日常工作中的常见需求——无论是制作证件照、电商商品图&#xff0c;还是社交媒体头像&#xff0c;都离不开一个靠谱的背景去除工具。但市面上的工具五花八门&#xff0c;从专业软件到在线应用&#xff0c;从手机App到小程序&#xff0c;到底哪个才是最简单…...

私有化多用户AI代码助手:基于开源LLM的部署与协作实践

1. 项目概述&#xff1a;一个面向多用户的代码助手开源项目最近在逛GitHub的时候&#xff0c;发现了一个挺有意思的项目&#xff0c;叫openclaw-multiuser。光看名字&#xff0c;你可能会有点懵&#xff0c;“openclaw”是啥&#xff1f;“多用户”又是指什么&#xff1f;简单来…...

从零到一:基于STM32与MAX30102构建可穿戴健康监测原型

1. 硬件选型与原理分析 第一次接触MAX30102传感器时&#xff0c;我被它小巧的体积和强大的功能震撼到了。这个比指甲盖还小的芯片&#xff0c;居然能同时测量心率和血氧饱和度&#xff0c;这让我对可穿戴设备有了全新的认识。选择STM32F103作为主控&#xff0c;主要是看中它丰富…...

ChatMark:将LLM对话导出为Markdown,实现AI协作知识管理

1. 项目概述&#xff1a;ChatMark&#xff0c;一个让AI对话“看得见”的利器 如果你和我一样&#xff0c;经常和各类大语言模型&#xff08;LLM&#xff09;打交道&#xff0c;无论是用ChatGPT、Claude还是本地部署的开源模型&#xff0c;一个共同的痛点就是&#xff1a;对话记…...

039对称二叉树

对称二叉树 题目链接&#xff1a;https://leetcode.cn/problems/symmetric-tree/description/?envTypestudy-plan-v2&envIdtop-100-liked 我的解答&#xff1a; //方法一&#xff1a;递归 //时间复杂度&#xff1a;O(n) //空间复杂度&#xff1a;O(n) public boolean isSy…...