CSS--浮动(一行两列,三行三列)

最新推荐文章于 2024-06-11 12:15:54 发布
最新推荐文章于 2024-06-11 12:15:54 发布
阅读量481 收藏 1
点赞数
分类专栏： 前端 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46858088/article/details/122147761
版权

目录

浮动属性：

一行两列

三行三列

浮动属性：

作用：控制页面元素脱离原有文档流，实现向左或向右 移动， 直到该元素外 边缘 碰到其包含 框或另一个浮动框的 边缘停止， 标准流中的其他盒子将顶到浮动盒子的位置 。浮动的元素不占据实际空间。
属性： float
取值：
none ：表示对象不 浮动，默认值
left ：对象向左浮动
right ：对象向右浮动

一行两列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>1行2列</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			#container{
				height: 500px;
				width: 900px;
				margin: 0 auto;
			}
			#aside{
				width: 200px;
				height: 500px;
				background-color: black;
				float: left;
			}
			#content{
				width: 695px;
				height: 500px;
				background-color: blue;
				float: right;
			}
		</style>	
	</head>
	<body>
		<div id="container">
			<div id ="aside"></div>	
			<div id="content"></div>
		
		</div>

	</body>
</html>

 

三行三列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2行3列</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			#container{
				height: 500px;
				width: 650px;
				margin: 0 auto;
			}
			#header{
				color: #000000;
				height: 100px;
				background-color: red;
				margin-bottom: 5px;
			}
			#aside1{
				width: 20%;
				height: 400px;
				background-color: black;
				float: left;
			}
			#aside2{
				width: 20%;
				height: 400px;
				background-color: cyan;
				
				float: left;
			}
			#content{
				width: 60%;
				height: 400px;
				background-color: green;
				float: left;
				margin-bottom: 5px;
			}
			
			#footer{
				height: 100px;
				background-color: yellow;
				clear: both;
			}
			
		</style>		
		
	</head>
	<body>
		<div id="container">
			<div id="header"></div>
			<div id="aside1"></div>
			<div id="aside2"></div>
			<div id="content"></div>
			<div id="footer">
			</div>
		</div>
		
	</body>
</html>

ML.star
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Day06-CSS布局-浮动
07-10
1. 创建多列布局：浮动常用于创建多列布局，如两列或三列布局。通过将左右两边的列设置为`float:left`和`float:right`，可以使它们并排显示。 2. 图文混排：在文章中，浮动可以让文本环绕在图片周围，增加视觉效果...
css实现两列布局，一列固定宽度，一列宽度自适应方法
low666的博客
04-08 1494
css实现两列布局，一列固定宽度，一列宽度自适应方法 固定宽度区浮动，自适应区不设宽度而设置 margin <div id="wrap"> <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div> <div id="content" style="he...
【css】css实现div两列布局（固定和自适应）（两种方法）
金金的博客
08-19 9090
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法） 1.实现目标 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2、思路 1、让两个div并排到一行 div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； 2、一个div宽度固定，另一个div自适应剩下的宽度 对自适应宽度的div处理方法是不去设置它的width属性，浏览器会自动计算后让它占一行，接下来给他设置margin-left属
如何用css实现两列布局?
最新发布
weixin_45596561的博客
06-11 1225
2.通过给两列都设置float:left属性和宽度就可以实现两列布局，还要设置伪元素清除浮动；通过给容器设置flex布局，然后每一列设置flex:1，就可以实现两列等宽；实现两列布局有多种方法，这里我会介绍几种常见的技术，包括浮动、Flexbox和Grid布局。无论使用哪种布局方式，都要考虑响应式设计，以确保布局在各种设备上都能良好展示。Grid布局是CSS中最强大的布局系统之一，尤其适合复杂的网格布局。就可以实现等宽两列布局，这种是只在容器设置即可。4. 多总结即可，容易忘。
css ul两列显示
05-13 2493
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> #hotNeeds ul{float:left;} 热门需求排行
CSS实现网页布局(一列，两列，三列)
Bazingaea的博客
03-13 1万+
1.一列布局（又叫单列布局）<style type="text/css"> body{margin:0;padding:0;} .head{heigth:200px;background:blue;} .main{height:500px;width:800p;margin:0 auto;} .footer{background:blue;height:200px;w
CSS布局之两列布局
weixin_47471015的博客
01-11 3510
两列布局 两列布局一般情况下是指定宽与自适应布局，两列中左列是确定的宽度，右列是自动填满剩余所有空间的一种布局效果； 左列自适应, 右列定宽 float + margin 属性实现； float + overflow 属性实现； display 属性的 table 相关值实现； 使用绝对定位实现； 使用 flex 实现； 使用 Grid 实现； 方案一：float + margin 属性实现 <style> *{margin: 0;padding: 0;} #left
CSS--再究内容变两列
weixin_43578860的博客
03-30 748
几行内容，如何变两列
DIV＋CSS＋HTML布局（三行两列布局）
05-17
"DIV+CSS+HTML布局（三行两列布局）"是一个常见的网页布局模式，广泛应用于各种网页设计项目中。这种布局将页面划分为三个垂直区域，每个区域内部再分为两列，从而提供了一个灵活且有序的展示空间。下面我们将详细...
学习DIV+CSS网页布局之三列布局
09-24
例如，在提供的代码中，`main-left`、`main-center`和`main-right`三个类分别对应三列，它们的宽度分别为25%、50%和25%，并设置了`float`属性以确保它们在一行内排列。 ```html <div class="main-left">左列 ...
CSS 三行二列模板
11-05
"CSS三行二列模板"是一个常见的网页布局模式，适用于创建有条理且清晰的页面结构。这个模板包括三行，每行有两个列，为网页内容提供了灵活的展示方式。下面我们将详细探讨这个模板的实现方法、应用场景以及相关的CSS...
CSS布局实例代码 两列布局实例
09-25
下面我们将详细讲解CSS两列布局、CSS三列布局、CSS等高布局等多种布局方式。 一、CSS两列布局 CSS两列布局是指在一个容器中，左侧和右侧各占据一部分的空间，左右两侧的宽度可以是固定的，也可以是一侧固定另一侧...
用CSS实现二栏与三栏布局
碉堡飞哥的博客
08-21 306
两栏布局 方法一：BFC构建 两栏布局是主内容区为主，左（右）侧有一栏，代码如下： &amp;amp;lt;style&amp;amp;gt; #header, #footer{ height: 100px; background: red; } #content .main{ heigh...
CSS - display flex 弹性布局实现一行仅显示 2 个，每行显示指定个数（设置 space-between / space-around 超出自动换行）详细示例代码
热门推荐
王佳斌
02-14 2万+
display flex css 一行显示两个，css弹性布局设置每行显示指定个数，css3 display: grid;弹性布局一行固定几个，列设置flex固定一行显示2个，CSS控制一行显示两个，css弹性布局设置每行显示指定个数，[CSS] 单列定宽的两列弹性布局，这个css是控制只有2个div在一行上么，css弹性布局+自动换行，flex布局 一行显示两个同宽、高的盒子 并 可以换行，flex布局每行显示固定个数，列设置flex固定一行显示2个，css - flex布局如何每行固定数量显示，CSS3
css布局——flex布局
aimnr的博客
11-29 1143
前言： flex布局原理 flex是flexble box 的缩写，意为“弹性布局”，用来为盒子模型提供最大的灵活性，任何一个容器都能指定flex布局 注意： 当我们为父盒子指定flex布局以后，子元素的float，clear 和vertical-align属性将失效 采用flex布局的元素被称为flex容器，他所有的子元素称为容器成员简称“项目” flex布局总结原理 就是是通过给父盒子添加flex属性来控制子盒子的位置和排列顺序 1.常见父项属性 flex-direction：设置主轴
css布局浮动布局
weixin_45954775的博客
09-27 182
默认文档流： 块级元素独占一行，宽高默认父级的100% 行内元素与其他元素共享一行 宽度高度都由内容决定 浮动布局 float: right left none onherit布局 (div ul>li ) 行级布局 利用块级元素的特点 <div class="container"> <div class="header"></div> <div class="content"></div> <div class="f.
单列变双列css_DIV+CSS实现列表一行两列的效果
weixin_39597868的博客
02-11 779
DIV+CSS没有系统地学习过，感觉还没入门，实际用起来捉襟见肘的，想用DIV+CSS控制，实现列表一行两列的效果，有人给出如下办法：.left_b{width:376px;height:auto; float:left;}.left_b li{width:170px;height:30px; line-height:15px; float:left; margin-right:10px;}.le...
CSS 设置两个div在同一行（display）
qq_22841387的博客
11-19 2024
display:inline
css中flex两列布局（一列自适应其他固定）
https://ligo100.cn 小何博客欢迎访问。
11-24 1227
最近写一个布局的时候，遇到一个问题。在没有图片的时候布局是正常的，如果有图片且设置了width:100%;则会出现图片将自适应布局撑开的情况。我的解决方式是让图片不缩放，图片外层再添加一个div元素。大家有什么更好的方式麻烦告知我一下呗，多谢！
vue中v-for循环一行三列列表
09-12
### 回答1： 你可以在Vue中使用v-for指令来循环生成一行三列的列表。具体步骤如下： 1. 在Vue的data中定义一个数组，包含要显示的数据。 2. 在HTML模板中使用v-for指令，循环遍历数组，并使用CSS样式控制每个数据项的位置。 例如，以下是一个简单的代码示例： ```html <template> <div class="container"> <div class="row"> <div class="col-md-4" v-for="(item, index) in items" :key="index"> <div class="card"> <div class="card-body"> <h5 class="card-title">{{ item.title }}</h5> <p class="card-text">{{ item.description }}</p> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { items: [ { title: 'Item 1', description: 'This is the first item.' }, { title: 'Item 2', description: 'This is the second item.' }, { title: 'Item 3', description: 'This is the third item.' }, { title: 'Item 4', description: 'This is the fourth item.' }, { title: 'Item 5', description: 'This is the fifth item.' }, { title: 'Item 6', description: 'This is the sixth item.' } ] } } } </script> <style> .container { margin: 20px auto; } .card { margin-bottom: 20px; } </style> ``` 在上面的代码中，我们定义了一个包含六个数据项的数组，并使用v-for指令循环遍历每个数据项。使用Bootstrap的栅格系统，我们将每个数据项放在一个具有col-md-4类的div中，以实现一行三列的效果。最后，我们使用CSS样式设置卡片的边距。 ### 回答2： 在Vue中，可以使用v-for指令来循环渲染一行三列的列表。 首先，在Vue组件中定义一个数组，里面包含要循环渲染的数据，比如： ``` data() { return { items: [1, 2, 3, 4, 5, 6] } } ``` 接下来，在模板中使用v-for指令来循环渲染列表，使用v-bind指令来绑定每个项的数据，比如： ``` <div> <div v-for="item in items" :key="item"> {{ item }} </div> </div> ``` 上述代码中，v-for指令会遍历items数组中的每一项，并将当前项的值赋给item变量，然后在循环体中渲染当前项的值。使用:key绑定每一项的唯一标识，以提高渲染性能。 为了实现一行三列的布局，可以使用CSS来设置每个项的宽度为33.33%（或根据实际需求设置），并设置适当的样式，比如： ``` <style> .item { width: 33.33%; display: inline-block; text-align: center; } </style> ``` 最后，将以上代码整合在Vue组件中，就可以在浏览器中看到一行三列的列表。每个项的宽度为33.33%，并按照数组中的值依次渲染。 以上就是在Vue中实现一行三列列表的简单方式，通过v-for指令和CSS样式来实现。根据具体需求，还可以进一步扩展和定制列表的样式和布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ML.star

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值