关于div一侧固定,另一侧自适应

最新推荐文章于 2022-04-12 17:17:14 发布
最新推荐文章于 2022-04-12 17:17:14 发布
阅读量186 收藏
点赞数
文章标签： xhtml

关于div一侧固定,另一侧自适应，从文字看出

一侧固定:说明有固定长度,

一侧自适应:说明是按比例缩放

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    
    <style type="text/css">
    
        .box {
            padding-right: 200px;
        }
        
        .left{
　　　　　　　　/*
　　　　　　　　　　这里主要考虑 margin-right:-300px; 和padding-right:200的比较以及 95%自适应宽度,当页自动缩放还会在同一行
　　　　　　       基本原理在上面已经说明清楚
                 ps: 首先浮动让两个块级元素在同一行,一个向左一个向右 一个设置页面比例和一个设一定的宽度(初步完成)
                 如果没有margin-right:-300px本例还是会撑下去的!
　　　　　　　　*/

            float: right; width:300px; min-height: 500px; margin-right: -300px;  background: red;
        }
        .right {
            float: left; width:95%; min-height:500px; background: green;
        }
    
    </style>
    
</head>
<body>

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

 

weixin_33908217
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【记录】一个div固定宽度，另一个自适应
qq_45768703的博客
01-13 462
用flex布局 在父元素用display: flex; 固定元素用flex: none; 自适应元素用flex: 1; <form id="form" target="test"> <input class="mask-tel" type="text" name='tel' placeholder="请填写您的手机号，以便获取免费报价" msg="请输入联系电话" rule="^((\(\d{3}\))|(\d{3}\-))?13\d{9}$"> <button typ
html div 一侧固定，另一侧宽度自适应
weixin_33737774的博客
01-15 299
2019独角兽企业重金招聘Python工程师标准>>> ...
div+css左右结构 一边固定另一边自适应技巧
周祥平程序专栏
06-14 4900
div+css左右结构 一边固定另一边自适应技巧           1、左边固定，右边自适应              这里是右边的内这里是右边的内这里是右边的内这里是右边的内这里是右边的内这里是右边的内这里是右边的内这里是右边的内这里是右边的内这里是右边的内这里是右边的内这里是右边的内这里是右边的内这里是右边的内容        
一行两个div，一个固定宽度，一个自适应铺满
云上人间钦自赏
03-24 2984
这样的需求很多地方需要用到，直接上代码， <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> *{margin:0;padding:0;} .left {float:left;width:2
css两列布局 一边固定一边自适应
DOM曼珠沙华的博客
03-25 2249
css两列布局一、优先渲染主要部分   当主要部分是自适应且需要优先渲染的时候，可采用以下三种方式：           &lt;!-- html结构 --&gt;                     &lt;div class="main"&gt; &lt;div class="main-content"&gt;main&lt;/div&gt; &lt;/div&gt;
DIV CSS：网页一行两列背景自适应
12-10
这个方法通过绝对定位和溢出隐藏，确保了背景始终填满内容的高度，无论哪一侧的内容更多。 在实际应用中，应考虑浏览器兼容性，特别是旧版的Internet Explorer，可能需要添加额外的CSS hack来确保布局在各种浏览器...
相邻div实现一个跟着另一个自适应高度示例代码
09-25
当任一侧的`div`内容增多时，其`padding-bottom`所创建的虚拟高度会随之增长，但由于`margin-bottom`是负值，所以不会影响整个容器的高度。由于两个`div`都浮动在同一行，它们会自动调整高度以保持相同高度。 这种...
两侧列固定中间列变宽Div布局示例
09-25
本文将详细探讨一种常见的网页布局方式——两侧列固定、中间列变宽的Div布局。这种布局模式在网页设计中非常实用，尤其适用于需要展示侧边栏信息，同时保证主要内容区域可随内容多少动态调整宽度的情况。 首先，...
独行DIV自适应宽度布局CSS实例与应用范围
12-13
独行DIV自适应宽度布局是CSS布局中一种重要的技术，主要应用于创建响应式网页设计，以确保内容在不同屏幕尺寸下都能良好展示。在这样的布局中，DIV元素的宽度不是固定不变的，而是根据其所在容器的大小动态调整。这...
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
热门推荐
LonelySnow的博客
04-08 2万+
1.应用场景 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决，需要攻克以下两点： 1）让两个div并排到一行 2）让一个div宽度固定，另个div占据剩下宽度的空间 关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； ...
div固定在页面左边
07-27
绝对支持IE6 IE7 IE8 和 FF的div层在页面左边固定不动，右边的div层超过页面高度正常滚动。
固定宽度边栏另一边自适应的布局（自己加了个改善）
汤一飞
08-31 379
css实现右侧固定宽度，左侧宽度自适应起因: 想弄一个布局：一边是固定宽度的边栏，一边是自适应宽度的div 尝试： 发现——以前一直以为自适应div设置好margin-right，边栏设置好float就行的，也就是文中的第一种方法，结果完全不行呢； 看了顶部的链接后，发现原因——html部分中，边栏要放在自适应div的前面；自适应部分的width不设置，它会自适应的，只要你别设disp
如何一边宽度自适应 一边宽度固定
写了个 bug
03-15 442
一： 右侧固定宽度 左侧自适应第一种：左侧用margin-right，右侧float：right  就可以实现。HTML代码可以如下写:    &lt;div class="box-left"&gt;        &lt;a href="" target="_blank"&gt;我是龙恩&lt;/a&gt;    &lt;/div&gt;　 &lt;div class=&qu
左边固定，右边自适应的七种方法
mango
06-29 4414
给左边div设置float:left，给右边div设置margin-left 左边div绝对定位，右边div设置margin-left 给父盒子设置display:table，给子盒子设置display:table-cell
实现两栏布局(左边固定，右边自适应)的六种方法
qq_43456687的博客
04-12 3966
html内容如下 <div class="wrap"> <div class="left">left</div> <div class="right">right</div> </div> 方法一：利用float .left { float: left; width: 200px; background-color: pink;
【css】css实现div两列布局（固定和自适应）（两种方法）
金金的博客
08-19 9094
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法） 1.实现目标 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2、思路 1、让两个div并排到一行 div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； 2、一个div宽度固定，另一个div自适应剩下的宽度 对自适应宽度的div处理方法是不去设置它的width属性，浏览器会自动计算后让它占一行，接下来给他设置margin-left属
div左边固定、右边自适应 和 上边固定、下边自适应
岩小黑的专栏
01-07 3332
在网页设计中，我经常遇到div一边固定、一边自适应的需求，在学习了关于CSS的一些书籍和网上的一些案例后，总结了两个例子，以便应对以后的不时之需。话不多说，直接看代码。 第一个，是div左边变化，右边固定的代码： #header,#footer { width:100%; height:1
两个div,一个在页面左边固定，另外一个自适应
xiaoxiaoluckylucky的博客
07-06 4389
直接上代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
写一个自适应伸缩的侧边导航栏
最新发布
09-03
要实现一个自适应伸缩的侧边导航栏，可以借助Vue的响应式特性和动态样式绑定。 首先，在Vue的模板中，可以使用v-bind指令来绑定一个布尔类型的变量（例如`isSidebarOpen`）来控制导航栏的展开与折叠状态。根据这个变量的值，可以设置导航栏的宽度、显示与隐藏等样式。 接下来，在Vue的组件中，可以通过计算属性来动态计算导航栏的样式。例如，导航栏展开时，设置宽度为200px；导航栏折叠时，设置宽度为50px。这样，当`isSidebarOpen`变量的值发生改变时，导航栏的样式也会自动更新。 最后，在用户交互方面，可以通过点击按钮或者其他触发事件来改变`isSidebarOpen`变量的值，从而控制导航栏的展开与折叠。 以下是一个示例代码： ```html <template> <div> <button @click="toggleSidebar">Toggle Sidebar</button> <div :style="sidebarStyle"> <!-- 导航栏内容 --> </div> </div> </template> <script> export default { data() { return { isSidebarOpen: false }; }, computed: { sidebarStyle() { return { width: this.isSidebarOpen ? '200px' : '50px', transition: 'width 0.3s' // 添加过渡效果 }; } }, methods: { toggleSidebar() { this.isSidebarOpen = !this.isSidebarOpen; } } }; </script> ``` 这样，当点击按钮时，`isSidebarOpen`变量的值会切换，导航栏的样式也会相应地改变，实现了自适应伸缩的侧边导航栏。 问题产生的原因是因为需要在不同的状态下展示不同的样式。通过使用Vue的响应式特性和动态样式绑定，可以方便地控制导航栏的展开与折叠，并实现自适应伸缩效果。 相关问题： 1. 如何在导航栏展开时显示更多的内容？ 2. 如何添加过渡效果来实现平滑的展开与折叠效果？ 3. 如何实现鼠标悬停时自动展开导航栏？

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值