CSS布局——两列和三列布局

最新推荐文章于 2024-07-14 02:10:33 发布
最新推荐文章于 2024-07-14 02:10:33 发布
阅读量3.6k 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ace_Arm/article/details/81044582
版权

两列布局

一列固定宽度，另一列自适应宽度
如下图所示：第一列固定宽度200px，第二列自适应。

代码

这里写图片描述

效果

这里写图片描述

使用flex布局的写法

代码

这里写图片描述
效果同上

三列布局

边上两列固定宽度，中间自适应
注意html的写法，左右两列，也就是1，3列应该写在一起，中间列写在最后

代码

这里写图片描述

效果

这里写图片描述

使用flex布局的写法

这里写图片描述
效果同上

Ace_Arm
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS常用布局方式-两列布局、三列布局
LKFOOD的博客
11-02 948
一.关于HTML基础 二.CSS基础 2.几种布局方式 1）table布局 当年主流的布局方式，第一种是通过table tr td布局 示例： <style type="text/css"> table{ width: 800px; height: 300px; border-collapse: collapse; } .left{ backgr...
CSS常见布局——两栏、三栏布局
zhaohb2016的博客
07-12 1131
一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：左盒子，float：left ，宽度固定设为200px; 右盒子：margin-left:200px;宽度默认（块级元素不设置宽度或auto时为100%） 2、float+BFC 左盒子，float：left ，宽度固定设为200px; 右盒子，设置overflow:hidden,触发了BFC，其中BFC特性为不与浮动元素重叠 3、float+flex 父盒子：display：flex; 左盒子，float：left ，宽度固定设为
DIV＋CSS＋HTML布局（三行两列布局）
05-17
DIV＋CSS＋HTML布局（三行两列布局）
CSS 常见两列布局、三列布局
weixin_34149796的博客
06-15 333
一、两列布局： 　方法一：采用position：absollute;并设置margin-left的值。 #left{ position:absolute; width:300px; top:0px; left:0px; background:#F00; } #right{ background:#0FC; mar...
css中flex两列布局（一列自适应其他固定）
最新发布
weixin_42350101的博客
07-14 75
问题最近写一个布局的时候，遇到一个问题。如下图的布局。在没有图片的时候布局是正常的，如果有图片且设置了width:100%;height: 100%; 则会出现图片将自适应布局撑开的情况。我的解决方式是让图片不缩放，图片外层再添加一个div元素。形如下图：大家有什么更好的方式麻烦告知我一下呗，多谢！代码登录后复制 &lt...
div+css经典三行两列布局
weixin_33939380的博客
03-10 1326
写在前面 在面试的时候遇到这样一个笔试题，使用div+css布局一个三行两列的页面。这里主要考察的是css中postion的具体用法。详细信息可参考我这篇文章： [HTML/CSS]说说position 代码 闲来无事，就自己动手实现了一下，代码如下： 1 &lt;!DOCTYPE html&gt; 2 3 &lt;html&gt; 4 &lt;head&gt; ...
三列布局
weixin_34274029的博客
04-11 74
1、宽度自适应三列布局　　三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。 　　同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的。(中间是自适应的） <!DOCTYPE html> <html> <...
DIV+CSS教程——第三天二列和三列布局借鉴.pdf
12-10
8. **CSS布局技巧**： - 通过`display`属性可以将内联元素转换为块级元素，或者将块级元素转换为内联元素，以适应不同的布局需求。 - 使用`box-sizing`属性可以控制元素的边框和内填充是否包含在元素的总尺寸中，...
网页布局 —— 基础篇
qq_36627117的博客
08-24 2595
制作网站中的静态网页最重要的是什么呢？很多人肯定知道，当然是布局了。那什么是布局呢？页面布局是对页面的文字、图像或表格进行格式化版式排列。想制作出好看的网页，就必须要弄懂网页布局所用到的知识，那么需要用到哪些知识?对于初学者而言，可能比较陌生，对网页布局这块可能还不能很好的掌握，布局最主要是就是css样式，要制作好看的网页，这是最基础的部分。所以就要灵活运用css，一般css都是配合div（块元素）使用，来实现好看的页面，所以大家可以看看一些网页中常见的布局方式。 网页布局一般分为一列布局，二列布局，三.
经典CSS+div样例
05-28
一列布局是最基础的，但两列和三列布局则更具有挑战性。在CSS中，可以使用浮动、Flexbox或Grid布局来实现这些结构。样例可能包含如何创建响应式布局，使页面在不同设备和屏幕尺寸上都能正常显示。 图文元素的布局...
用DIV+CSS实现国内经典式三行两列布局
05-18
用DIV+CSS实现国内经典式三行两列布局,附图片
八十八、CSS两列三列的布局方式
微信号：RunsenLiu
12-01 1230
八十八、CSS两列三列的布局方式
三栏布局（三列布局）
政旻
08-12 447
主要讲解HTML+CSS实现三栏布局的几种方法
CSS（3）：三列布局
羽墨灵丘的博客
02-05 1009
css实现三列布局的几种方式
css三列布局（一）
zp1996323的博客
11-01 1035
这就是一个三列等高布局的效果，运用了padding补偿法，先上代码： dom结构：<div class="container"> <div class="left"> fefwefew </div> <div class="center"> wefwefwe </div> <div class="right">
网页三列布局
萧无义的武功秘籍
04-25 338
示例 :&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt;
常见布局之三列布局
Kratial的博客
08-30 780
1.三列布局：两边定宽，中间自适应 css样式部分： &amp;amp;amp;amp;amp;amp;lt;style&amp;amp;amp;amp;amp;amp;gt; *{ margin:0; padding:0; } html,body{ height:100%; } div{ float:left; height:100%; } .m
前端之三列布局
qq_31207499的博客
08-08 6406
        在前端开发中，三列布局是很基础的一种场景，这篇文章就总结一下实现三列布局的方法及优缺点，还有一些和三列布局相关的布局方式。         三列布局的要求一般为：               1、左右两边宽度固定，中间宽度自适应。               2、中间列的内容可以完整显示。       这种情况用定位和浮动都可以实现。         1、使用定位，使用定...
CSS布局技巧：两列与三列布局解析
本文主要汇总了CSS中的两列布局和三列布局的实现方法，适合前端开发者巩固CSS基础知识，特别是布局技巧。 在前端开发中，虽然现代UI框架如Bootstrap、Flexbox和Grid使得布局设计变得更加方便，但基础的CSS布局知识...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值