首页 > 其他分享 >一个div靠左另一个靠右

一个div靠左另一个靠右

时间:2022-09-19 12:33:59浏览次数:67  
标签:flex 靠左 width 100px height 靠右 1px div border

1.使用flex布局

<style>
			#back{
				border: red solid 1px;
				width: 800px;
				height: 500px;
				display: flex;
				align-items: center;
			}
			#left{
				border: blue 1px solid;
				width: 100px;
				height: 100px;
				justify-content: flex-start;
				
				
			}
			#right{
				border: blue 1px solid;
				width: 100px;
				height: 100px;
				justify-content: flex-end;
				flex:1;
				display: flex;
				
			}
		</style>
	</head>
	<body>
		<div id="back">
			<div id="left">left</div>
			<div id="right">right</div>
			
		</div>

标签:flex,靠左,width,100px,height,靠右,1px,div,border
From: https://www.cnblogs.com/lwx11111/p/16707336.html

相关文章

  • js在指定div右键菜单 js限制div内使用鼠标右键功能
     最近在做一个小东西的时候需要在某一个元素上“右击”触发一个自定义菜单,通过自定义的菜单对右击的条目进行编辑。这就要求屏蔽默认的右键菜单IE和FF下面的元素都有onc......
  • div居中方法
    1.在父元素使用display:flex;justify-content:center;align-items:center其中justify-content是左右居中,align-items是上下居中......
  • 将div排成一列
    1.在子元素使用display:inline-block注意子元素宽度加上边距不能超过父元素宽度,否则就在下一行展示<style>#back{ border:redsolid1px; width:800px; ......
  • Codeforces Round #316 (Div. 2) D Tree Requests
    TreeRequests判断\(V_i\)的子树中,深度为\(h_i\)的结点上所带有的字符,能否组成一个回文串启发式合并维护所有深度上不同字符的数量,并且维护其奇数字符出现的次数如......
  • Codeforces Round #221 (Div. 1) D Tree and Queries
    TreeandQueries询问\(V_j\)的子树中,有多少种颜色出现了\(K_j\)次启发式合并最直接的,树上启发式合并的同时维护颜色出现的次数,然后再拿一个数组记录一下出现了\(i......
  • Codeforces Round #151 (Div. 2) E Blood Cousins Return
    BloodCousinsReturn启发式合并在跑启发式合并的同时,对每个深度都维护一个\(set\),就可以自动去重并计算有多少种不同的字符串#include<iostream>#include<cstdio>......
  • CF1694B Paranoid String#800(div.2)
    题目链接https://codeforces.com/contest/1694/problem/B题意简述样例点击查看样例分析对于以\(01\)结尾的串,如\(a_1\a_2\a_3\...\0\1\)如果\(0\)的前......
  • 什么是 div::before 和 div::after?我们如何使用它们?
    什么是div::before和div::after?我们如何使用它们?你还有关于伪元素的问题吗div::之前和div::之后?如果是这样,请不要担心;当我学习CSS时,或者当我看到编码推文时,我......
  • Codeforces Round #816 (Div. 2) A-D
    CodeforcesRound#816(Div.2)A-D传送门A题意:长为n,m的一个棋盘,左上的旗子要去右下,左下的棋子要去右上,每次移动花费为1,但当一个棋子在另一个棋子的轨迹上时,可以花费......
  • Codeforces Round #819 (Div. 1 + Div. 2) A-D
    CodeforcesRound#819(Div.1+Div.2)A-D传送门过程本场A小磕一下,浪费了一点时间,随后B的迷惑题面浪费大量时间,心态发生了变化,不过最后还是在强猜后蒙过了,C又浪费了......