两列，一列有宽度，另外一列自适应(div 布局)

最新推荐文章于 2020-08-19 15:32:05 发布
最新推荐文章于 2020-08-19 15:32:05 发布
阅读量961 收藏
点赞数
文章标签： div border float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dotnet90/article/details/1698587
版权

<style>
#a {
        width:20px;
        border:1px solid;
        display:inline;
        float:left;
}
#b {
        border:1px solid;
        display:inline;
        float:left;
}

</style>
<div nowrap="nowrap">
        <div id="a">&nbsp;</div>
        <div id="b">&nbsp;1111111111111</div>
     </div>
 

dotnet90
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
左右两列自适应中间列内容即随中间内容高度自适应的布局
09-25
两边内容可能随中间内容高度自适应，中间内容也可以随两边内容高度的增加而自适应，经过测试在主流浏览器中显示一致，下面将经验与大家分享
两列布局(两列宽度均自适应）
wuxeek的博客
01-28 336
公司项目需要使用两列布局，要求左右列宽度自适应，左列高度随着内容自动出现滚动条，网上的方案有很多种，研究了一下采用float+BFC的解决方案。 最终实现效果如图： 原理： 浮动元素的块状兄弟元素会无视浮动元素的位置，尽量占满一整行，这样该兄弟元素就会被浮动元素覆盖。 若浮动元素的块状兄弟元素为BFC，则不会占满一整行，而是根据浮动元素的宽度，占据该行剩下的宽度，避免与浮动元素重叠。...
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
热门推荐
LonelySnow的博客
04-08 2万+
1.应用场景 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决，需要攻克以下两点： 1）让两个div并排到一行 2）让一个div宽度固定，另个div占据剩下宽度的空间 关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； ...
学习DIV+CSS网页布局之一列布局
09-24
在实际应用中，一列布局不仅限于固定宽度，还可以通过百分比宽度或者媒体查询实现自适应宽度，以适应不同分辨率的设备。例如，可以将`#main`的宽度设置为`width: 100%`，使其占据父容器的全部宽度，这样在窄屏幕设备...
DIV CSS：网页一行两列背景自适应
12-10
【网页一行两列背景自适应】的实现是一个经典的CSS布局挑战。在网页设计中，有时候我们需要将页面主体分为左右两栏，每栏拥有不同的背景颜色，同时要求这两栏的背景高度能够随着各自内容的多少自动调整，保持一致。...
HTML实现2列布局(左侧宽度固定，右侧自适应)的方法示例
12-13
本示例探讨了如何使用HTML和CSS实现一个两列布局，其中左侧宽度固定，右侧则自适应剩余空间。以下是对这两种方法的详细解释： **实现一：利用浮动（Float）** 在第一种方法中，我们主要利用CSS的`float`属性来实现...
两侧列固定中间列变宽Div布局示例
09-25
本文将详细探讨一种常见的网页布局方式——两侧列固定、中间列变宽的Div布局。这种布局模式在网页设计中非常实用，尤其适用于需要展示侧边栏信息，同时保证主要内容区域可随内容多少动态调整宽度的情况。 首先，...
css布局—一列宽度固定，一列宽度自适应
吾非燕的博客
08-17 2177
当想要实现这个布局的时候觉得so easy,入门题啊，结果实现的时候却发现自己too young too simple。1、先讲一种最直接的，也是我不经大脑思考就拿来用的方法:利用calc(）html:<div class="main"> <div class="left">1</div> <div class="right">2</div> </div>css:*{margin:
CSS左右两列自适应高
wenlyli的专栏
09-05 667
无标题文档 *{ margin :0px; padding: 0px; } .da_div{ width: 750px; background-image: url(http://www.as1983.com/blog/attachments/month_0708/z200782114026.gif); margin:0px auto; margin-top:3px;
【css】css实现div两列布局（固定和自适应）（两种方法）
金金的博客
08-19 9188
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法） 1.实现目标 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2、思路 1、让两个div并排到一行 div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； 2、一个div宽度固定，另一个div自适应剩下的宽度 对自适应宽度的div处理方法是不去设置它的width属性，浏览器会自动计算后让它占一行，接下来给他设置margin-left属
css3弹性布局中的两列宽度自适应布局和两列右列宽度自适应布局
liying123466的博客
04-16 2466
两列宽度自适应布局       #left{ width:20%;  height:300px; background-color: pink; float:left;} #right{ width:75%;  height:300px; background-color: green; float:left;}             *****注意这里设置那个
两列布局宽度自适应
君林天下的专栏
03-17 953
一、两列布局左列自适应右列固定宽度 1.绝对定位法 右列设置固定宽度，并设置绝对定位。左列则用外边距撑开。不设定宽度自适应。 HTML left content right content CSS *{padding: 0;margin: 0;} .left,.right{ height: 999px;} .left{margin-
两列布局——左侧宽度固定，右侧宽度自适应的两种方法
daxwvxhx715404的博客
08-22 343
　　今天做了一个练习，要求用两种方法来实现左侧宽度固定、右侧宽度自适应的两列布局。一开始我以为会很简单，毕竟只是练习，但是我写出了一种方法之后却没能顺利的写出第二种方法。对于网上的一些解决方法我还是不太满意，于是自己继续琢磨着，问问一些前辈，希望得到一些思路。终于，皇天不负有心人，在自己翻译的一篇关于BFC的文章上，我找到了解决的方法。 　　关于左侧宽度固定，右侧宽度自适应两列布局的一...
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度
TOMOROW的专栏
11-10 1779
 DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;Firefox IE测试通过.辛苦几天的结果啊平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.下面两句很重要的.百分比情况下窗口人为缩小的时候布局混乱问题就解决了. .divGlobal,.DivTop
解决HP1005开机只预热不工作问题
最新发布
08-19
解决HP1005开机只预热不工作问题
1、随意编写一个或多个网页和对应的CSS文件，使用所有学过的基础布局，包括： (1) 单行单列宽度固定左对齐； (2) 单行单列宽度固定居中对齐； (3) 单行单列宽度自适应左对齐； (4) 单行单列宽度自适应居中对齐； (5) 多行单列宽度固定左（或居中）对齐； (6) 多行单列宽度自适应左（或居中）对齐； (7) 单行两列宽度固定左（或居中）对齐； (8) 单行两列左列宽度固定右列宽度自适应左（或居中）对齐； (9) 单行三列宽度固定左（或居中）对齐； (10) 单行三列左右列宽度固定中间宽度自适应左（或居中）对齐；
05-15
很抱歉，我只是一个语言模型，无法直接提供网页和CSS文件。但是，我可以为您解释每种布局的示例和CSS代码。 1. 单行单列宽度固定左对齐 示例： ``` <div class="container"> <div class="box">Content</div> </div> ``` CSS代码： ``` .container { width: 600px; margin: 0 auto; } .box { width: 200px; text-align: left; } ``` 2. 单行单列宽度固定居中对齐 示例： ``` <div class="container"> <div class="box">Content</div> </div> ``` CSS代码： ``` .container { width: 600px; margin: 0 auto; text-align: center; } .box { width: 200px; display: inline-block; text-align: left; } ``` 3. 单行单列宽度自适应左对齐 示例： ``` <div class="container"> <div class="box">Content</div> </div> ``` CSS代码： ``` .container { width: 100%; } .box { display: inline-block; text-align: left; } ``` 4. 单行单列宽度自适应居中对齐 示例： ``` <div class="container"> <div class="box">Content</div> </div> ``` CSS代码： ``` .container { width: 100%; text-align: center; } .box { display: inline-block; text-align: left; } ``` 5. 多行单列宽度固定左（或居中）对齐 示例： ``` <div class="container"> <div class="box">Content</div> <div class="box">Content</div> <div class="box">Content</div> </div> ``` CSS代码： ``` .container { width: 600px; margin: 0 auto; } .box { width: 200px; text-align: left; float: left; /* 左对齐 */ /* margin: 0 auto; 居中对齐 */ } ``` 6. 多行单列宽度自适应左（或居中）对齐 示例： ``` <div class="container"> <div class="box">Content</div> <div class="box">Content</div> <div class="box">Content</div> </div> ``` CSS代码： ``` .container { width: 100%; } .box { display: inline-block; width: 30%; /* 或者设置具体宽度 */ text-align: left; float: left; /* 左对齐 */ /* margin: 0 auto; 居中对齐 */ } ``` 7. 单行两列宽度固定左（或居中）对齐 示例： ``` <div class="container"> <div class="box left">Content</div> <div class="box right">Content</div> </div> ``` CSS代码： ``` .container { width: 600px; margin: 0 auto; } .box { text-align: left; float: left; /* 左对齐 */ /* margin: 0 auto; 居中对齐 */ } .left { width: 200px; } .right { width: 400px; } ``` 8. 单行两列左列宽度固定右列宽度自适应左（或居中）对齐 示例： ``` <div class="container"> <div class="box left">Content</div> <div class="box right">Content</div> </div> ``` CSS代码： ``` .container { width: 600px; margin: 0 auto; } .box { text-align: left; float: left; /* 左对齐 */ /* margin: 0 auto; 居中对齐 */ } .left { width: 200px; } .right { width: calc(100% - 200px); } ``` 9. 单行三列宽度固定左（或居中）对齐 示例： ``` <div class="container"> <div class="box left">Content</div> <div class="box middle">Content</div> <div class="box right">Content</div> </div> ``` CSS代码： ``` .container { width: 600px; margin: 0 auto; } .box { text-align: left; float: left; /* 左对齐 */ /* margin: 0 auto; 居中对齐 */ } .left { width: 200px; } .middle { width: 200px; } .right { width: 200px; } ``` 10. 单行三列左右列宽度固定中间宽度自适应左（或居中）对齐 示例： ``` <div class="container"> <div class="box left">Content</div> <div class="box middle">Content</div> <div class="box right">Content</div> </div> ``` CSS代码： ``` .container { width: 600px; margin: 0 auto; } .box { text-align: left; float: left; /* 左对齐 */ /* margin: 0 auto; 居中对齐 */ } .left { width: 200px; } .middle { width: calc(100% - 400px); } .right { width: 200px; } ``` 以上就是十种基础布局的示例和CSS代码，希望对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值