如何正确显示浮点数？侧边栏div保持左侧，内容保持右侧浮动 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

【CSS】课程网站头部制作 ③ ( 搜索栏表单测量 | 搜索栏表单代码编写 | 代码示例 )

文章目录一、搜索栏表单测量 1、左侧边界 2、文本输入框表单尺寸 3、文本输入框表单提示文本测量二、搜索栏表单代码编写 1、HTML 标签结构 2、CSS 样式 3、输入表单效果一、搜索栏表单测量...---- 1、左侧边界搜索栏 , 大概结构如下 , 左侧是个文本框 , 右侧是个按钮 ; 导航栏文本有 10 像素内边距 , 20 像素外边距 , 文本输入框表单 , 距离导航栏外边距有...: left; /* 设置左外边距 65 像素 */ margin-left: 65px; } /* 搜索栏输入框 */ .search input { /* 设置左浮动 , 方便与右侧的按钮进行排列..., 底部显示 2 像素的 #00a4ff 颜色实线 */ border-bottom: 2px solid #00a4ff; } /* 搜索栏盒子模型 */ .search { /* 设置左浮动.../* 设置左浮动 , 方便与右侧的按钮进行排列 */ float: left; /* 宽度为 360 像素, 但是左侧有 20 像素内边距变为 340 像素 */ width: 340px;

1.9K3 0

css布局使用

div> div> **布局步骤**: 对两边侧栏分别设置宽度，并对左侧栏添加左浮动，对右侧栏添加有浮动。...设置两侧栏的top值都为0，设置左侧栏的left值为0，右侧栏的right值为0。对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。...通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边..."> 左侧边栏宽度固定 div class="main">主内容栏宽度自适应div> 右侧边栏宽度固定...">主内容栏宽度自适应div> 第1个侧边栏宽度固定第2个侧边栏宽度固定

1.9K9 0

您找到你想要的搜索结果了吗？

是的

没有找到

面试必考点：前端布局知识

将左侧栏，右侧栏移到与内容栏同样高度，这里先利用float浮动元素。...注意浮动完成之后，footer元素被盖在内容块下面了。 ③. 利用margin-left的负值将左侧栏，右侧栏和内容栏移到同一高度。...注意：这里的左右侧栏都是附在内容栏上的，内容栏被压在下面。 ④. 将底部footer区域利用clear属性清除content内的浮动元素透出来。...将左右侧边栏设置绝对定位属性，position: absoluate，进行布局在与内容栏同高的位置。 ④. 分别设置left:0与right:0 属性，保持内容块与左右侧栏有顺序且不重合排列。 div class="main">主要内容div> div class="left">左侧栏div> div class="right">右侧栏div>

9755 1

【Web前端】CSS传统布局方法（补充）

示例： div class="container"> div class="column-left">左侧列div> div class="column-right">右侧列内容区域和侧边栏，它们通常具有不同的宽度。...2.1 基于浮动的两列布局经典的基于浮动的两列布局，左侧是主内容，右侧是侧边栏： div class="container"> div class="main-content">主内容div class="container"> div class="main-content">主内容div> div class="sidebar">侧边栏div> div class="header">头部div> div class="main-content">主要内容div> div class="sidebar">侧边栏div> 3.4

861 0

【CSS】课程网站头部制作 ② ( 导航栏测量 | 导航栏编写 | 代码示例 )

文章目录一、导航栏测量 1、左侧边界 2、文本测量 3、底部边框测量二、导航栏代码编写 1、 HTML 标签结构 2、 CSS 样式 3、最终显示效果三、完整代码 1、 HTML...标签结构 2、 CSS 样式一、导航栏测量 ---- 1、左侧边界导航栏最左侧位置 , 距离 logo 盒子有 70 像素 , 考虑到设置外边距 , 这里将 logo 盒子与导航栏之间的距离设置成....logo { /* 靠左侧浮动 */ float: left; /* 设置与导航栏盒子的外边距 */ margin-right: 60px; } 2、文本测量选择 " 横排文字 "...工具 , 点击文字内容 ; 在文字工具中 , 会显示文字大小 18 像素 , 点击右侧的颜色 , 还会弹出 " 拾色器 ( 文本颜色 ) " 对话框 , 其中显示了文本颜色 #050505 ;...垂直排列 , 且左侧有小圆点 ; 先清除默认的列表样式 : /* 清除列表默认样式 ( 主要是前面的点 ) */ li { list-style: none; } 导航栏要设置左浮动 , 才能与 logo

3.9K2 0

三栏布局的方法你又会几种？

圣杯布局的核心思想是通过浮动和边距技巧，将中间的主要内容区域放在文档流的前面，左右侧边栏紧随其后。这样可以确保中间内容区域的优先加载。...主要通过以下几步实现：浮动：使用浮动技术将左右侧边栏和中间内容区域横向排列。内边距padiding：通过设置内边距使中间内容区域不能够覆盖左右侧边栏，留出空位。...相对定位：使用相对定位调整左右侧边栏的位置，使其正确显示。...双飞翼布局的核心思想是通过浮动和边距技术将中间内容区域放在最前面，左右侧边栏紧随其后，同时在中间内容区域内部嵌套一个.inner元素，以确保主要内容不被左右侧边栏覆盖。...浮动：使用浮动技术将左右侧边栏和中间内容区域横向排列。外边距margin：通过设置外边距使中间内容区域能够占据中间部分，而留出空白给广告位。

2531 0

小结CSS的float属性

实现原理：侧边栏、中间内容区域的元素设置向左浮动（float:left;），最下面的footer元素设置为清除左右两边的浮动(clear:both;) 2.float的属性值 float有四个可用的属性值...4.如何清除浮动 4.1clear属性规定元素的哪一侧不允许有其他浮动元素 clear: none | left | right | both left：不允许左侧有浮动对象； right：不允许右侧有浮动对象...clear: both; } 4.2使用空标签清除浮动还是以上述为例，侧边栏、中间内容区域的元素设置向左浮动（float:left;），为了清除浮动，把侧边栏、中间栏外包一层父元素，然后在父元素的闭合标签前...;">div> div> 4.3触发BFC 还是以上述为例，侧边栏、中间内容区域的元素设置向左浮动（float:left;），为了清除浮动，给包含浮动元素的父元素，设置overflow..."> //中间栏 div> div> 5.小结本文主要结合了具体事例，分别介绍了什么是浮动、设置浮动会有什么影响，以及如何消除浮动。

1.2K5 0

小结CSS的float属性

div> 1.2创建网页布局 float属性还常用于网页布局：效果：网络布局.png 实现原理：侧边栏、中间内容区域的元素设置向左浮动（float:left;...4.如何清除浮动 4.1clear属性规定元素的哪一侧不允许有其他浮动元素 clear: none | left | right | both left：不允许左侧有浮动对象； right：不允许右侧有浮动对象...clear: both; } 4.2使用空标签清除浮动还是以上述为例，侧边栏、中间内容区域的元素设置向左浮动（float:left;），为了清除浮动，把侧边栏、中间栏外包一层父元素，然后在父元素的闭合标签前...id="main-content"> //中间栏 div> div style="clear:both;">div> div> 4.3触发BFC 还是以上述为例，侧边栏、中间内容区域的元素设置向左浮动...> div> 5.小结本文主要结合了具体事例，分别介绍了什么是浮动、设置浮动会有什么影响，以及如何消除浮动。

5.1K140 3

回顾div+css几种经典布局

三列布局什么是三列布局经典的三栏布局：左右量栏固定，中间宽度自适应可以利用浮动，定位，fiex布局，gird布局等方法来实现以下是几种可以实现三列布局的方法，各有优缺点内容必须放在最后 --> div class="right">右侧边栏div> div class="left">左侧边栏div>...div class="middle"> 主题内容主题内容主题内容...当中列要显示完整 3....两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局 3. 两种布局方式的不同之处在于如何处理中间主列的位置：代码如下 <!

1.7K3 0

如何使用Flexbox和CSS Grid，实现高效布局

下面是需要创建的内容：要完成这个基本布局， Flexbox 需要完成的主要任务包括以下方面：创建完整宽度的 header 和 footer 将侧边栏放置在主内容区域左侧确保侧边栏和主内容区域的大小合适...导航栏的左侧有一个 logo 和两个菜单项，右侧有一个登录按钮。导航位于 header 中，通过 justify-content: space-between; 可以实现导航和按钮之间的自动间隔。...接下来，将侧边栏和主内容区域使用一个 wrapper 包含起来。...具有 .wrapper 类的 div，也需要设置 display: flex; 但是 flex 方向与上述不同。这是因为侧边栏和主内容区域彼此相邻而不是堆叠。...主内容区域应该是侧边栏大小的三倍，使用 Flexbox 很容易实现这点。

3.5K1 0

实战 HTML & CSS：如何快速搭建一个响应式博客首页

比如说本次demo，分为5个盒模型，分别是导航栏、核心内容模块、文章内容模块、单个文章内容模块、右侧广告栏。 html页面内容实现有了一个整体布局规划，接下来就开始网页内容实现。...align-content: center; /* 导航栏内内容的垂直对齐方式设置为居中 */ position: fixed; /* 导航栏的位置属性设置为固定，以便在页面滚动时保持在原位置...根据之前的盒模型分析，核心内容一共有4个模块：核心内容模块、文章内容模块、单个文章内容模块、右侧广告栏。...盒模型背景渲染我们先给这4个模块添加不同的背景色（核心内容模块-红色、文章内容模块-黄色、单个文章内容模块-浅蓝、右侧广告栏-绿色），看看样式： .content{ background-color...完善样式参考预期的效果，关于核心内容目前还缺少的样式如下：右侧广告栏，固定展示位置，不管文章列表如何滚动，始终固定显示在页面上；右侧广告栏的内容居中展示；各种边框阴影效果等； .content

1491 0

【Web前端】深入CSS 布局

: footer; background-color: lightpink;">Footerdiv> div> 通过grid-template-areas，我们创建了一个包含头部、侧边栏...、内容区和底部的布局。...通过设置float: left;或float: right;，可以使元素分别浮动到父容器的左侧或右侧。...>这是一个浮动示例，图片将浮动到左侧，文本将围绕在图片周围。... div> 在这个例子中，图片浮动到左侧，文本则环绕在图片右侧。需要注意的是，浮动元素之后的内容通常会出现“塌陷”问题，即元素的父容器高度会变为0。

1051 0

【Web前端】项目实训：CSS基本布局理解

题 1：基于栅格布局的现代博客首页设计题目要求：创建一个博客首页布局，包含一个顶部导航栏、一个主要的内容区域（左侧为博客文章列表，右侧为一个侧边栏显示推荐内容），以及一个底部的页脚。...要求使用栅格布局来分割页面，顶部导航栏固定在顶部，内容区域左右分栏。代码示例：导航栏侧边栏推荐内容...顶部导航栏：header 元素被设置在第一行，占据整个页面宽度，居中显示导航文字。...内容区域：main-content 和 sidebar 分别设置在栅格的中间部分，主内容区域宽度是侧边栏的三倍，符合现代博客的布局风格。

1231 0

掌握 CSS 浮动的关键

sidebar"> 这里是侧边栏的文字内容。...广告图片右浮动后，文字会自动环绕在图片左侧，既不影响广告的展示，又能保持页面的整洁和美观。 div> 横向排列：可以使多个元素在同一行上横向排列，方便进行布局设计。...比如，将多个按钮设置为浮动，可以让它们在一行上显示，节省页面空间。二、float 属性值 left：左浮动，元素靠上靠左排列。...这就导致当父元素内部包含浮动元素时，父元素的高度可能无法正确地根据子元素的内容进行调整，从而出现高度坍塌的问题。...> div> 这样，:after伪元素会在父元素的内容之后插入一个新的元素，这个元素会清除浮动，从而使父元素的高度能够正确地包含浮动元素。

701 0

CSS入门指南-4：页面布局

div> 这里我们将两栏都添加float: left，以让它们并排显示。...如此一来，只要为内部div设定一次样式，就可以把让所有内容元素与栏边界保持一致的距离。而且，将来再需要调整时也会很方便。任何新增内容元素的宽度都由这个内部div决定。...处理栏及其内部div的关键在于，浮动栏并设定栏宽，但不给任何内容元素设定宽度。要让内容元素扩展以填充它们的父元素——内部div。...这样，只要简单地设定内部div的外边距和内边距，就可以让它们以及它们包含的内容与栏边界保持一定距离。...总结这篇文章我们介绍了用浮动的有宽度的元素来创建多栏布局、如何让固定布局在页面上居中以及让它们在一定范围内可以伸缩。同时也了解了如何使用内部div在浮动元素中生成间距，而又不会改变布局的总宽度。

2.2K1 0

【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )

, 搜索栏还需要保持不管如何进行滚动 , 始终悬浮在最上方 ; 搜索栏必须是同固定定位 , 才能实现上述效果 ; 搜索栏父容器样式如下 : /* 下面是搜索栏样式 */ .search-wrap...-- 搜索栏下方的主要内容 --> div class="main-content"> 左侧的列表按钮 --> div class="search-btn">div> 右侧的登录按钮 --> div class="search-login">登陆div> div> 栏下方的主要内容 --> div class="main-content"> <!

1.7K2 0

常见的布局实现

200px 被侧边栏覆盖 */ background-color: rgba(0, 255, 0, .5); } /* 方法2: float...+ 负margin 方式 (即双飞翼布局) */ /* 浮动 container 和 aside 列, 通过负margin 正确定位 aside 列 * container...200px 被侧边栏覆盖 */ background-color: rgba(0, 255, 0, .5); } 侧边栏覆盖 */ background-color: rgba(0, 255, 0, .5); } /* 方法3:...float + 负margin 方式 (即双飞翼布局) */ /* 浮动 container 和 side 列, 通过负margin 正确定位 side 列 *

8306 0

css布局 - 工作中常见的两栏布局案例及分析

一、大结构上的导航栏和内容区域两栏布局首先我们从大结构上说起，因为我发现很多网站从整个首屏的大结构上都是这种两栏布局：旁边是侧边栏导航，中间是大块内容区域。...对于腾讯网课程这个样式，使用的左右固定宽度+左右浮动。不想整理了。感兴趣的自己打开这个页面查看吧。 ? 3、慕课网的：左侧absolute定位脱离文档流，右侧自适应。...左侧浮动： ? 右侧自适应，margin让出左侧范围。 ? html结构： ? 样式关键点： main负责控制总宽度和水平居中。...左侧nav浮动右侧内容区margin让出nav的宽度范围。自适应。 css样式： ? 简陋的效果 ? 4、最后说Github，就比较简单粗暴了百分比宽度+浮动。 ?...上边h2通栏因为内容在左侧，所以直接设置了100%宽度（也就是没设置宽度） h2右侧的内容，利用浮动会形成文字环绕效果。让该内容直接右浮动就自动绕开了nav的空间。

2.9K1 1

【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )

; 绿色盒子 : 版心内部左侧的盒子存放 logo 按钮以及版权内容 ; 橙色盒子 : 版心内部右侧盒子 , 存放几排链接 ; 2、底部的大盒子测量及样式底部的大盒子高度 415 像素...-- 左侧侧导航栏 --> div class="subnav"> 右侧课程栏 --> div class="course"> 显示 2 像素的 #00a4ff 颜色实线 */ border-bottom: 2px solid #00a4ff; } /* 搜索栏盒子模型 */ .search { /* 设置左浮动...样式 */ /* 侧导航栏样式 */ .subnav { /* 设置左浮动 */ float: left; /* 左侧侧导航栏 190 x 420 , 左右两侧各 20 像素内边距 */

4.2K3 0

React 侧边栏组件 Sidebar

React作为一款流行的前端框架，提供了丰富的工具和方法来构建交互式的侧边栏组件。本文将深入探讨如何创建一个React侧边栏组件，介绍常见问题、易错点及如何避免这些问题，并通过代码案例进行解释。...同时，利用CSS类名的变化来控制侧边栏的显示效果。（三）样式设计为了使侧边栏看起来更加美观且易于使用，我们需要为其添加适当的样式。...当侧边栏处于关闭状态时，它会被移动到屏幕左侧之外；当打开时，则平滑地滑入视图。三、常见问题与易错点（一）响应式设计不足在实际开发中，侧边栏可能需要适应不同的屏幕尺寸。...auto; transform: translateY(100%); } .sidebar.open { transform: translateY(0); }}上述CSS规则确保了侧边栏在小屏幕设备上能够正确显示并保持良好的用户体验...通过在资源文件中定义不同的翻译版本，可以根据当前的语言环境自动切换显示内容。（三）事件委托与性能优化对于包含大量交互元素的侧边栏，直接为每个元素添加事件监听器可能会导致性能问题。

2031 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭