悬赏 怎么把这div代码放到阿里巴巴首页div 自定义组合模块里面？代码放进去按确定后提示没有内容 这是全视屏效果

来源：蜘蛛抓取(WebSpider) 时间：2018-09-08 16:29 标签： div 自定义组合

　　一个入门的DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度。

　　说明：代码非真实情况下使用，所以直接简单。

 　　没耐心的直接看。

　　1. 我的第一反应：

　　然后发现不对，中间红色的div根本就没有显示：

　　2. 百度看到一个，4楼 的答案如下：

这是比较典型的一个三栏布局 给你思路吧

　　结果如下：（浅灰色是html页面背景颜色）

　　很明显，这不符合预期。左右2个div的 定位出现问题了，不是以 父div 来定位，而是以 窗口 为 父元素定位了。于是我在w3cshool详细了解才发现：

　　absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

　　3. 修改父元素为非static定位

　　结果是：（浅灰色是html页面背景颜色）

　　可以发现：左右2个 absolue 的div元素都乖乖的没有问题，倒是中间的红色div 明显变长了，突出了一部分。用Chrome调试，发现是右边的绿色div覆盖在了中间的红色div上，并且红色div整体是 宽500px。

　　【后经GK同学指导：margin-right起作用了，只是它透明了看不见。至于红色超出部分可以给 父div设置属性：overflow:hidden解决，这里也还有问题，见5】

　　后来把 margin-left 去掉，发现正常了。（其实就是绿色和灰色把红色的左右两边遮住了而已，其实红色还是500px）。

　　但是也就看上去正常，但感觉不是符合要求，并没有充满“剩余宽度”，而是直接充满“全部宽带”，然后被左右2个absolute的div遮住了左右宽度。

　　如果写上文字，会发现（中间的div文字被遮住了）：

　　结果如图：中间div的文字被右边遮住了，问题只是被简单的隐藏了。并没有解决。

　　6、先贴出一个完美办法，GK同学的。很清晰，很明确。

这里有个，讲解三栏布局。　

后记：（2014年2月20日）

最近又看了一次本文，上面有些啰嗦。之所以一直不对，是我对下面2个知识点没理解。

GK同学方法之所以奏效，他用的是

　　width: 100% 就是自己和父元素的宽度一样是500px，接着 margin: 0 150px，就是自己左边离父元素边界有150px，这么算，自己中间的div自然会超出一部分。

　　　　并且中间div的一部分会被右边（绿色）的div给遮住一部分。如图3。

　　width: auto 由浏览器自己计算div的宽度。GK同学代码里，由于左右div是绝对定位，不在文档流中，中间div自动充满整个父元素，只不过左右被 左边和右边的div遮住了。但是，有趣的是，

　　　　他用的是 padding: 0 150px，这样，中间div内容区域就不会被遮住。如下图：

　　这里关键理解 CSS 中盒模型的 width 指什么区域：

我要回帖

更多关于 div 自定义组合 的文章

 

随机推荐