我想让浮动的左侧div在移动设备上调整宽度 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

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

样式关键点： main父元素负责整体的水平居中。 nav负责左边元素的左浮动+可展示宽度220px mainCont负责占据右边剩余位置，在这里具体做法是让其跟随左侧也形成浮动流。...左侧nav浮动右侧内容区margin让出nav的宽度范围。自适应。 css样式： ? 简陋的效果 ? 4、最后说Github，就比较简单粗暴了百分比宽度+浮动。 ?...css关键思路： main依旧应该负责总宽度和水平居中之类的布局，这里因为这一小块是嵌套在其他结构里的。就没有什么设置。 nav样式上在右边，但是结构上被放到了上边。进行右浮动。...上边h2通栏因为内容在左侧，所以直接设置了100%宽度（也就是没设置宽度） h2右侧的内容，利用浮动会形成文字环绕效果。让该内容直接右浮动就自动绕开了nav的空间。...内容区域设置了左浮动和自身视觉宽度上的width值（也就是设计稿上多宽这里设置了多宽）不过我的愚见，觉得这里可以不设置浮动。反而设置上百分比宽度是为了自适应很有必要。 css代码： ?

3.2K1 1

界面设计技法之布局

这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！顺便提下，所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。...div> 在这个例子中， section 元素实际上是在 div 之后的（译注：DOM结构上）。...然而 div 元素是浮动到左边的，于是 section 中的文字就围绕了 div ，并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？...然而 div 元素是浮动到左边的，于是 section 中的文字就围绕了 div ，并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？...在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果

1.4K1 0

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

是的

没有找到

CSS基础布局

float+margin 实现两列布局 1. div1 左浮动：给出左侧的空间 2. div2 的margin-left留出 div1 的宽度. + overflow: hidden;也变为BFC块，和...float+margin 实现三列布局 1. div1 左浮动：给出左侧的空间 2. div2 右浮动：给出右侧的空间 3. div3 的margin-left margin-right 分别留出 div1...* 让页面在不同的设备上能正常的使用 * 主要处理的是屏幕大小的问题(严格来讲还涉及到是否有鼠标是否是读屏软件是否支持一些样式) * 在具体的方法上涉及到设计和实现两方面。...，而是加一个伪元素放到浮动元素的后面，从而让父元素包含浮动元素。...* 设计上：隐藏(不需要在移动端显示的，就不让在移动端显示) 折行(在pc端横排的东西，在移动端可以少排一些或者竖排) 自适应(留下自适应的空间)

3.4K2 0

【前端】CSS浮动详解

什么是浮动属性（float）浮动（float）属性用于将元素变成浮动元素，浮动元素会脱离标准流的控制（即"脱标"），它们移动到父级元素的左右边缘或与其他浮动元素相接。...缺点：增加了冗余的无意义标签，不利于页面的结构化。伪元素法在父级元素上使用伪元素 :after 来清除浮动，无需添加额外标签。...页面中的其他元素会按照浮动元素所处位置的改变来调整自己的位置，这样就能实现类似于水流绕过石块的效果。为什么父元素会塌陷？...两栏布局的实现思路左侧栏固定宽度，右侧栏自适应左侧栏设置固定宽度，并向左浮动。右侧栏通过设置 margin-left 为左侧栏的宽度，实现自适应。...三栏布局的实现思路左右两侧固定宽度，中间内容自适应左侧栏设置固定宽度，向左浮动。右侧栏设置固定宽度，向右浮动。

3001 0

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

，使得列的宽度能根据视口的宽度自动调整，创造出更灵活的网格布局。...因为浮动元素的宽度通常是以固定值或百分比来定义的，所以当视口（viewport）宽度发生变化时，必须手动调整布局的CSS代码，这使得代码难以维护和扩展。...比如，CSS Grid可以轻松控制网格项之间的间距，Flexbox可以让元素在容器中均匀分布或对齐。... (中屏幕，如笔记本) col-lg- (大屏幕，如桌面显示器) col-xl- (超大屏幕) 例如，col-md-6意味着在中屏及以上的设备上，这一列占据12列中的6列，也就是...small-4：表示在小屏幕及以上的设备中，每个单元占4个网格单位（共12个单位）。

1.7K1 0

掌握 CSS 浮动的关键

广告图片右浮动后，文字会自动环绕在图片左侧，既不影响广告的展示，又能保持页面的整洁和美观。 div> 横向排列：可以使多个元素在同一行上横向排列，方便进行布局设计。...比如，将多个按钮设置为浮动，可以让它们在一行上显示，节省页面空间。二、float 属性值 left：左浮动，元素靠上靠左排列。...例如，可以为浮动元素设置明确的宽度和高度，以控制其大小。（二）包含块浮动元素的包含块和常规流一样，是父元素的内容盒。这决定了浮动元素在页面中的位置范围。...如果父元素的尺寸发生变化，浮动元素的位置也会相应地调整。（三）盒子尺寸特性宽度为auto时，适应内容宽度。...具体做法如下： .clearfix:after { content: ""; display: table; clear: both; } 然后将这个类应用到包含浮动元素的父元素上： div

2851 0

CSS BFC实现多栏自适应布局

流体特性下面，我们稍微做一个调整，div距离容器左侧margin 150像素，里面的图片同样100%自适应内容区域。...div> 图片右下角有两道斜杠，我们可以resize拉伸（现代浏览器，且非移动访问），会发现，左侧永远150像素留白，而图片随着容器宽度变化而自适应变化了。...src="mm1.jpg" width="100%" height="190">div> div> 结果分别如下：当然，你可以左侧有多个浮动，或者左浮动+右浮动。...结果，当当当当：注意：我这里举margin这个例子，不是让大家这样使用，只是为了让大家可以深入理解BFC元素与浮动元素混排的特性表现。...而纯流体布局，clear:both会让后面内容无法和float元素在一个水平上，产生布局问题。自适应内容自动填满浮动以为区域，无需关心浮动元素宽度，可以整站大规模应用。

1.8K4 0

四. css 布局之 float

1. float 简介通过浮动可以使一个元素向其父元素的左侧或右侧移动使用 float 属性来设置于元素的浮动: 可选值： none 默认值，元素不浮动 left 元素向左浮动 right 元素向右浮动...，不再占据文档流中的位置 2、设置浮动以后元素会向父元素的左侧或右侧移动， 3、浮动元素默认不会从父元素中移出 4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素 5、如果浮动元素的上边是一个没有浮动的块元素...，则浮动元素无法上移 6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高简单总结：浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局...-- div class="box1">div> 在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。...他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。我不知道那些花草真叫什么名字，人们叫他们什么名字。

9042 0

百度Web前端技术学院(1)-HTML, CSS基础

盒模型及定位已知宽度的 div 居中用两种方法来实现一个背景色为红色、宽度为 960px 的在浏览器中居中我的方法一：使用 margin：0 auto; html 文件的情况。这点在移动设备上显得尤为重要。...左侧固定右侧自适应宽度的两列布局用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化我的方法一：不使用浮动，使用绝对定位，将左上角的块放好位置，右边的块设置...，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化原题中参考资料双飞翼布局浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化这个题我觉的直接将每一个块浮动起来就好了，不知我理解的对不对。

1.3K3 0

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

题 1：基于栅格布局的现代博客首页设计题目要求：创建一个博客首页布局，包含一个顶部导航栏、一个主要的内容区域（左侧为博客文章列表，右侧为一个侧边栏显示推荐内容），以及一个底部的页脚。...通过 grid-template-areas 确定每个区域的布局位置。顶部导航栏：header 元素被设置在第一行，占据整个页面宽度，居中显示导航文字。...内容区域：main-content 和 sidebar 分别设置在栅格的中间部分，主内容区域宽度是侧边栏的三倍，符合现代博客的布局风格。...浮动布局的使用：底部的推荐产品区域采用浮动布局，每个推荐产品使用 float: left 并设置固定宽度，使它们并排排列。同时使用 overflow: hidden 清除浮动。...响应式设计：使用媒体查询（@media）调整布局，使页面在移动设备上显示更加友好。当屏幕宽度小于 768px 时，产品图片和描述区垂直排列，推荐产品区域的每个项目宽度为 100%。

5611 0

css笔记

我一样重要行内元素的特点：（1）和相邻行内元素在一行上。（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。（3）默认宽度就是它本身内容的宽度。...元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。总结：浮动 ---> 浮动的目的就是为了让多个块级元素同一行上显示。...在CSS中，clear属性用于清除浮动，其基本语法格式如下：选择器{clear:属性值;} clear 清除属性值描述 left 不允许左侧有浮动元素（清除左侧浮动的影响） right 不允许右侧有浮动元素...（相对定位不脱标）如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。... 我一阵感动，刚想夸他两句。儿子接着说：“以后全靠你让我拼爹了！” 　[注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

8.4K5 0

【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )

div> 3、CSS 样式三个盒子水平排列 , 需要将起设置为左浮动 ; 由于需要设置左侧的 border 边框 , 设置了边框整体增加 1 像素 , 导致第三个元素换行..., 因此不能使用传统的盒子模型需要使用 CSS3 盒子模型 ; .news a { /* 设置浮动让三个链接盒子水平排列 */ float: left; /* 由于需要设置左侧的....news img { /* 所有图片宽度自适应 */ width: 100%; } .news a { /* 设置浮动让三个链接盒子水平排列 */ float: left.../* 设置 .brand 父容器下的 div 盒子左浮动这样这些盒子可以在水平方向上紧密排列 */ float: left; /* 要在水平方向上放置 3 个为其设置...margin-top: 20px; } .news img { /* 所有图片宽度自适应 */ width: 100%; } .news a { /* 设置浮动让三个链接盒子水平排列

2.7K4 0

Float 的那些事

css float 定义元素浮动到左侧或者右侧。其出现的本意是让文字环绕图片而已。 left、right、inherit（从父级元素获取float值）、none 一、浮动的性质 1....块1享有浮动，脱离文档流并且向右移动 ? 　　　　　块1向左浮动。IE8和Firefox中因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了块2，使块2从视图中消失。...而IE6和IE7中紧跟在浮动元素块1的块2也会跟着浮动。如下图 ? ? 　　2.2 浮动“塌陷” 　　　　对父元素的影响：如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。...解决方案　　　　① 在使用float元素的父元素结束前加一个高为0宽为0且有clear:both样式的div div> div>块1 float:left div...div> 　　　　② 在使用float元素的父元素添加overflow:hidden; 　　　　③ 使用after伪对象清除浮动 3. float与JavaScript 　　使用JavaScript

1.1K3 0

css左侧固定宽度，右侧自适应的几种实现方法

左侧固定，右侧自适应或者右侧固定在，左侧自适应是一样的。这种布局很常见，而且面试过程中也经常会问到，这里我总结的方法一共有5种。要实现这种布局，也算比较简单。...但实际上这个方法有个很老火的限制——html中sidebar必须在content之前！但我需要sidebar在content之后！...因为我的content里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。但如果sidebar在content之后，那上面的一切都会化为泡影。...所以，最终我决定：float与margin都用。我打算把content的宽度设为100%,然后设置float:left，最后把他向左移动310，以便于sidebar能挤上来。...前四种方法转载自老生长谈：css实现右侧固定宽度，左侧宽度自适应。这里主要是将各种方法进行汇总。我目前了解到的方法主要是这些，如果大家还有其他方法的请留言分享

3.2K2 0

浮动布局的深入理解与应用

div> 在这个示例中，img元素被设置为浮动到右侧，文章的正文内容会环绕在图片的左侧。示例2：多列布局在一些新闻网站或博客中，你可能需要将文章分成多列显示。... div> div style="clear: both;">div> div> 在这个示例中，每个新闻标题和内容被放置在一个div元素中，并设置为浮动到左侧。...示例3：响应式布局在响应式设计中，浮动布局也可以发挥重要作用。例如，你可以在大屏幕上显示多列内容，而在小屏幕上将内容显示为单列。... div> div style="clear: both;">div> div> 在这个示例中，每个新闻标题和内容被放置在一个div元素中，并设置为浮动到左侧。...通过媒体查询，你可以在小屏幕上调整这些元素的宽度和布局，使其在小屏幕上显示为单列。

3501 0

【移动端网页布局】流式布局 ① ( 流式布局简介 | 百分比布局非固定像素布局 | 根据屏幕尺寸设备类型自动调整网页布局 )

; 流式布局可以根据设备屏幕尺寸和设备类型自动调整网页布局和标签元素大小 , 以适应不同尺寸的设备屏幕 ; 当设备屏幕尺寸发生变化时 , 标签元素的尺寸也会相应地调整 ; 移动端流式布局注意事项...设置最大和最小宽度 : 在设置元素宽度时，需要考虑最小和最大宽度，以确保元素在不同设备上都能够正常显示。...最小宽度 : min-width ; 最大宽度 : max-width ; max-width: 980px; min-width: 320px; 使用响应式图片 : 在移动端流式布局中，图片大小也需要自适应调整...可以使用响应式图片，通过设置不同的图片尺寸和分辨率来实现。使用媒体查询 : 使用媒体查询可以根据不同的屏幕尺寸和设备类型，设置不同的CSS样式。...测试不同设备的显示效果 : 在完成布局之后，需要在不同的设备上测试显示效果，以确保布局在不同设备上都能正常显示。二、流式布局代码示例 ---- 代码示例 : <!

1.4K3 0

《精通CSS》第3章可见格式化模型

这时，元素盒子的位置，由在 HTML 中的位置决定。块级盒子会沿垂直方向堆叠，盒子在垂直方向上的间距由他们的上、下外边距决定。行内盒子是沿文本流水平排列的，也会随文本换行而换行。...但对于我们样式编写者来说，更加倾向的是元素盒子的大小可以通过width和height指定，在新增边框和内边距的时候，内容区自动计算，而不是每次都要手动的调整，才能保证元素盒子的整体宽高不变。...最后，内边距、边框和外边框可以应用于元素的四边，也可以单独用于某一边。外边距甚至可以使用负值，从而使得元素在页面中移动。...浮动-宽度自适应.png 如果三个盒子都向右浮动，则后面两个会向右移动直到碰到自己前面的浮动盒子。如下： ?...如果包含块太窄无法容纳所有浮动元素水平排列，后面的元素会向下移动如下图左侧。如果浮动元素高度不同，后面的浮动元素在向下移动时可能会“卡”在前面的浮动元素左侧，如下图右侧。 ?

1.6K2 0

CSS常用实例，web前端开发者不知道这些就太low了

好处：代码相对优雅，并且符合div+css布局网站的风格坏处：要设置元素的宽度，控制不好，有可能换行展示，并且要对父元素清除浮动 --> .clearfix{ overflow: hidden...-- 对上面的方法稍加改动，左侧浮动+定位，右侧设置margin-left来实现。...-- 如果你是在移动端开发，或者不考虑IE低版本浏览器兼容问题，你可以用transform: translate(-50%, -50%);来实现。...class="panel"> div> 三、元素宽高等比放大缩小相信不少同学在移动端网页开发中，都插入过图片吧，试问一下，你的图片比例是否可以跟随屏幕尺寸的变化而不变？...-- 试验二：在上面代码基础上, 把html,body的height设置为100%, 也没有实现我想要的效果 --> html, body{ height: 100%

1.9K12 0

CSS

效果：　　　　还可在调试窗口调整颜色来测试（调试窗口：页面上右键--检查，或者f12）　　　　调整好之后，把调整后的值复制到我们的css属性里面就行了　　　　还可以通过hover来设置鼠标移动上去变颜色...先看这个问题昂：在给c2的div标签加上浮动之前是下面这样的效果：　　　　我并没有给c1那个div标签设置高度，但是你发现c1这个div标签是有高度的，这是因为里面两个c2div我设置了高度了，这两个...div将c1这个div标签撑起来了　　　　当我们加上浮动之后，你再看这个c1的div标签的高度：发现c1这个div的高度没有了，显示的高度是1.99，是因为我给它设置了边框，上下边框加起来正好2px，...值描述 left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。...50%，上面是50%，所以我们还要移动窗口，往左移动标签宽度的一半，往上移动高度的一半就行了。

2K1 0

【移动端网页布局】流式布局案例 ⑤ ( 连续排列的链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

在布局中 , 三个链接图片水平排列在一起 , 并且中间没有缝隙 , 说明这是使用浮动进行设置的 , 为父容器的三个子元素都设置左浮动 , 就可以实现上述效果 ; 设置浮动后 , 还需要设置子元素的宽度..., 如果子元素横向累加宽度超过当前宽度 , 会自动换行 , 因此这里为每个子元素设置一个 1/3 宽度 , 即 33.33% ; 子元素 div> 设置浮动和宽度的样式如下 : .brand div...{ /* 设置 .brand 父容器下的 div 盒子左浮动这样这些盒子可以在水平方向上紧密排列 */ float: left; /* 要在水平方向上放置 3.../ 设备宽度的 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮的图像宽度该图片自动水平 / 垂直对齐 */.../* 设置 .brand 父容器下的 div 盒子左浮动这样这些盒子可以在水平方向上紧密排列 */ float: left; /* 要在水平方向上放置 3 个为其设置

4.3K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭