两栏布局时左侧栏出现下移问题的解决方法

最新推荐文章于 2024-07-17 18:05:45 发布

原创最新推荐文章于 2024-07-17 18:05:45 发布 · 273 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#两栏布局时左侧栏出现下移问题的解决方法

CSS 专栏收录该内容

68 篇文章

订阅专栏

本文探讨了在使用两栏布局时，左栏在特定CSS设置下出现下移的现象，并提供了解决方案。通过调整left栏的定位方式，从float改为absolute，同时调整right栏的margin-left属性，有效避免了布局异常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用两栏布局，给left设置float：left；给right设置overflow：hidden；时会出现left往下移动的问题，如下：

.left{height:820px; width:196px;background:#417ec8;float:left }

/*right*/
.right{height:820px;overflow:hidden;}

在这里插入图片描述

解决方法：使用定位可以解决

.left{height:820px; width:196px;background:#417ec8; position:absolute; }


/*right*/
.right{height:820px; margin-left:196px; }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

clqxmt

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

浅谈CSS两栏、三栏自适应布局

筱葭的博客

12-15

799

1、右侧固定宽度，左侧自适应方法一：左侧设置margin-right为右侧的宽度，右侧设置float：right #left{ height:300px; margin-right:300px; background:#DDD; } #right{ width:500px; height:300px; float:ri

React 实现通过鼠标拖拽动态改变左侧菜单栏宽度

qq_37698249的博客

07-26

354

React 实现通过鼠标拖拽动态改变左侧菜单栏宽度。

参与评论您还未登录，请先登录后发表或查看评论

CSS布局经典问题：两栏布局-左侧固定，右侧自适应

weixin_30378311的博客

04-28

315

这个问题在开发时碰过非常多次，是经典布局问题。很多公司的面试题也会问这类问题，今天就详细的来谈一下这类问题。还有一篇类似的文章，关于三栏布局详情请戳题意非常明确，左侧的块宽度是固定的，右侧的宽度会随着浏览器的宽度变化的，见下图。 1.BFC 为了解决这个问题，首先，我们来理解一下何为BFC。 BFC（Block Formatting Context）直译为“块级格式化范围”。 BF...

用CSS实现布局（两栏布局，多栏布局）

u010565037的博客

02-17

6102

在网页上的布局比较经典的是两栏布局和三栏布局。两栏布局两栏布局是主内容区为主，左（右）侧有一栏，代码如下： style> #header, #footer{ height: 100px; background: red; } #content

html table 上移下移

weixin_33801856的博客

03-02

2637

js操作表格操方法,增加,修改,删除，一行记录随机选择行添加一行删除选定行上移选定行下移选定行按第一列排序按数据和排序 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o...

css两栏布局,左边定宽,右边自适应

Cherish_XYT的博客

08-23

533

HTML部分 &lt;body&gt; &lt;div class="box"&gt; &lt;div class="left"&gt;&lt;/div&gt; &lt;div class="right"&

如何实现：页面两栏布局左侧固定、右侧自适应

suisui0725的博客

03-06

310

<div class="box"> <div class="inner_box_left">1</div> <div class="inner_box_right">2</div> </div> 方法一：利用flex布局 .box{ display: flex; } .inner_box_left{ w...

谈谈两栏布局和三栏布局

zj128548的博客

09-05

367

1、左侧固定宽度，右侧自适应方法一：左侧设置float: left，右侧设置margin-left为左侧的宽度。注意：右侧不能设置float: left。<!doctype html> <html> <head> <style type="text/css"> #left{

Qt创建列表，通过外部按钮控制列表的选中下移、上移以及左侧图标的显现

肩上风骋的博客

07-17

1032

项目中需要使用列表QListWidget，但是不能直接拿来使用。需要创建一个列表，通过向上和向下的按钮来向上或者向下移动选中列表项，当当前项背选中再去点击确认按钮，会在列表项的前面出现一个图标。

CSS实现导航固定的、左右滑动的滚动条制作方法

11-20

设计一个响应式布局的网页，该网页包含两列，左侧为菜单栏，右侧为主要内容区，当屏幕宽度小于768px时，菜单栏应该位于主内容区下方，请使用html和css媒体查询实现这一功能。

最新发布

11-19

这里是一个简单的例子，演示了如何让菜单栏和主要内容区在屏幕宽度小于768px时交换位置： HTML结构： ```html <!DOCTYPE html> , initial-scale=1">  <li>Menu Item...

Material Design【Android-Toolbar，滑动菜单，悬浮按钮，卡片布局，下拉刷新和可折叠式标题栏及案例】

~~~的博客

12-13

3871

Material Design——界面设计 1.Toolbar，标题栏 1】修改配置文件 <application android:name="org.litepal.LitePalApplication" android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundI

两栏布局，左侧固定宽度，右侧自适应大小

青天诀的专栏

05-31

8558

html代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS布局</title> </head> <body> <div id="left"></div> <div id="right"></div> </body> </html>第一种方式*{margin:0;

CSS3中的过渡属性

weixin_43755513的博客

08-06

3358

CSS3中的过渡属性 1.属性：transition （1）transition-property规定应用过渡的CSS属性的名称。（2）transition-duration定义过渡效果花费的时间。默认是0。（3）transition-timing-function规定过渡效果的时间曲线。默认是“ease”。 ease规定慢速开始，然后变快，然后慢速结束的过渡效果。 linear规定以相同的速...

CSS中的边框属性和属性值

weixin_43755513的博客

07-24

2005

CSS中的边框属性和属性值

浏览器兼容前缀

weixin_43755513的博客

08-01

1814

1.浏览器兼容前缀 -ms-:IE浏览器 -moz-:火狐浏览器 -o-:欧朋浏览器 -webkit-:谷歌、苹果浏览器 2.渐进增强写法和优雅降低写法（1）渐进增强：先针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 /**/ .tra...