设置了float的元素会随着后面未设置float的元素移动而移动。望各位前辈不吝赐教! -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

设置了float的元素会随着后面未设置float的元素移动而移动。望各位前辈不吝赐教!

2016-06-03 14:18:45 1820 1

想做一个左侧固定220px,右侧随屏幕大小自适应的的布局,对于 float的使用 有些困惑,

<!DOCTYPE html>
<html>
<head>
    <title>左侧固定,右侧实现随屏幕宽度大小自适应</title>
    <meta charset="utf-8">
    <style type="text/css">
    *{margin: 0;padding: 0;}
    left {background-color: green;width: 220px;float: left; }
    content { width: 100%;border: solid red 1px;}
    contentInner {margin-left: 220px;background-color: orange;}    
    </style>    
</head>
<body>
<div id="left">Left Sidebar</div>
<div id="content">
<div id="contentInner">Main Content</div>
</div>
</body>
</html>

关于float的问题(以下各div块都用其id指代),
如果在left中设置属性margin-top:50px。left会向下移动50px距离,content不动。
screenshot
但如果是在content中设置属性margin-top:50px,虽然content向下移动了50px的距离,但是left居然跟着一起下去了,这是什么情况?
screenshot
left设置了float:left后不是已经脱离文档流了吗?如果在content中设置float:left后,left又会回到顶上...为什么?

取消 提交回答
全部回答(1)
  • 西秦说云
    2019-07-17 19:26:34

    要实现左侧固定,右侧随屏幕大小适应的布局,我认为比较合适的写法是:

    <body>
        <div class="l-container">
            <div class="l-sidebar"></div>
            <div class="l-main"></div>
        </div>
    </body>

    css:

    .l-container:after{
        display: table;
        clear: both;
        content: "";
    }
    .l-sidebar{
        float: left;
        width: 220px;
    }
    .l-main{
        margin-left: 220px;
    }

    如果需要上边距,可以考虑在各部分内部增加div,设置padding-top。这可以很好的避免垂直外边距合并带来的困惑。

    0 0
相关问答

1

回答

MaxCompute 项目浏览器 (Project Explorer)是什么?

2021-12-13 00:31:19 247浏览量 回答数 1

0

回答

集团公司营业执照号码已经在备案局备案过了,现在阿里云上的上的域名说有和ICP备案信息不符,无法变更

2019-01-08 16:29:17 457浏览量 回答数 0

1

回答

explorer.exe 无法关联 zip 文件

2018-12-10 16:22:49 573浏览量 回答数 1

1

回答

通过ftp查看空间文件的权限都是0

2018-06-28 18:48:57 571浏览量 回答数 1

2

回答

調用ASR的 录音文件识别 一 直遇 到 403

2017-07-14 01:10:03 2525浏览量 回答数 2

1

回答

OSS居然不能移动文件夹,需要重新上传 ,晕死,ftp也不行

2016-03-04 16:59:27 3264浏览量 回答数 1

3

回答

新手阿里云ECSLinux如何解压ftp上传的zip文件

2015-10-27 21:44:16 10618浏览量 回答数 3

2

回答

为什么我压缩的分卷zip文件,到linux下面解压之后,得到的文件夹数量不够

2015-06-18 14:11:00 5604浏览量 回答数 2

7

回答

咨询求教购买的配置问题,O∩∩O谢谢各位帮忙解答

2013-08-12 10:31:05 8247浏览量 回答数 7

5

回答

各位兄弟我上次在这个板块看到一条wdcp安装视频教程贴

2013-02-22 16:52:10 5235浏览量 回答数 5
+关注
杨冬芳
IT从业
文章
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载