<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{margin:0 0;padding:0 0;}
.wrap{overflow:hidden;width:800px;margin: 0 auto;}
.common{float:left;background-color:#cde1ff;padding-bottom: 3276px !important;margin-bottom: -3276px !important; }
.mode-maincontent{width:100%; background-color:#fff;}
.mode-maincontent .cont{margin-left:210px; margin-right: 310px;background-color:#fde0ff;}
.mode-colL{width:200px; margin-left:-100%;}
.mode-colR{width:300px;margin-left:-300px;}
</style>
</head>
<body>
<div class="wrap">
<div class="common mode-maincontent">
<div class="cont">1946年，年青的银行家安迪（蒂姆•罗宾斯 Tim Robbins 饰）被冤枉杀了他的妻子和其情人，这意味着他要在肖申克的监狱渡过余生。
银行家出身的安迪很快就在监狱里很吃得开，他懂得如何帮助狱卒逃/税，懂得如何帮监狱长将他收到的非法收入“洗白”，很快，安迪就成为了狱长的私人助理。
一名小偷因盗/窃入狱，他知道安迪妻子和她情人的死亡真相，兴奋的安迪找到了狱长，希望狱长能帮他翻案。虚伪的狱长表面上答应了安迪，暗中却派人杀死了小偷，只因他想安迪一直留在监狱帮他做帐。
安迪知道真相后，决定通过自己的救赎去获得自由！</div>
</div>
<div class="common mode-colL">ModeLeft</div>
<div class="common mode-colR">ModeRight</div>
</div>
</body>
</html>
分享到：
相关推荐
让我们深入探讨一下CSS中margin负值的应用及其原理。 首先，理解margin的基本概念。在CSS中，margin是元素周围的空间，它分为上、下、左、右四个方向。默认情况下，margin设置为正值会使元素与其相邻元素之间产生...
利用margin来实现等高布局是一种非常巧妙的方法。其核心思想在于通过设置一个非常大的负外边距（margin-bottom），再相应地设置一个较大的内边距（padding-bottom），这样可以将浮动元素超出父容器的部分隐藏起来，...
首先，设置Div的宽度和相对定位，然后设置left属性为50%，并使用负值margin等于Div宽度的一半，以使其居中： ```css .main { width: [容器宽度]; position: relative; left: 50%; margin-left: -[容器宽度/2];...
浮动布局、利用margin负值、以及使用`calc()`计算属性都是实现这种布局的常用方法。需要注意的是，不同的方法适用于不同的场景，浮动布局方法虽然简单，但在处理复杂的布局时可能会出现布局重叠等问题；而`calc()`...
本文档主要讲解了元素水平垂直居中的方法，包括利用定位+margin:auto、利用定位+margin:负值、利用定位+transform、table布局、flex布局、grid布局等六种方法。这六种方法可以分为两大类，即居中元素宽高已知和居中...
解决绝对定位元素居中的方法是利用margin-left或margin-top（视垂直或水平居中而定）的负值。如果想要水平居中一个绝对定位的元素，可以将left属性设置为50%，这会将元素的左边缘移动到其父元素左边缘的50%位置。...
双飞翼布局则利用浮动和负margin实现，中心区域通过额外的包裹元素实现居中。 `clearfix`类通常用于解决浮动元素导致的父元素高度塌陷问题，通过在父元素上添加`.clearfix::after`伪元素，并设置`clear:both`，可以...
通过给元素设置负值的margin，可以使元素相对于其正常位置进行位移。在自适应布局中，使用负边距是一种非常实用的技巧，尤其是在需要将某些元素快速地放置到特定位置时。比如在圣杯布局中，我们会使用负的左边距来将...
在Web开发中，CSS布局技术使得页面内容按照设计意图排列展示，其中实现两栏固定宽度而中间一栏自适应剩余空间的布局是非常常见的需求。本文章将通过介绍四种不同的CSS技术实现方法，为读者提供多种布局方案。 首先...
3. Margin负值的问题： 对margin的top、left、right、bottom设置负值，元素会向上、向左、向右、向下移动。 4. BFC的理解和应用： BFC是Block format context的缩写，表示一块独立渲染区域，内部元素的渲染不会影响...
在CSS布局中，盒子模型（Box Model）是一个至关重要的概念，它定义了元素在网页上的占用空间，包括元素的内容区（Content）、内边距...在实际开发中，合理利用`margin`的重叠特性，可以提高代码的效率和可维护性。
假设我们有一组左浮动的元素，每个元素都有固定的宽度和左右25px的外边距。为了实现两端对齐，我们可以设置父容器的左右外边距为负值，比如-25px。这样做实际上是在拉伸父容器的宽度，使得其覆盖了所有元素的外边距...
比如，一个无固定宽度的块级元素，当设置负的`margin-right`时，其实际宽度会被增加，这是因为文档流会根据这个负值来计算元素的边界。这种特性在某些情况下可以替代浮动布局，尤其是当需要创建等高列布局时，通过负...
- 右侧：使用`margin-left`设置与左侧宽度相同的负值。 - **方法二**：双浮动法。 - 左右两个元素均设置`float: left`。 - 右侧元素使用`margin-left`设置与左侧宽度相同的正值。 ##### 4.4 三栏布局 - **方法...
计算方式为`负值 = 图片宽度/2`和`负值 = 图片高度/2`。 2. **Flexbox布局**： - 将父div设置为`display: flex;` - 添加`justify-content: center; align-items: center;`以实现水平和垂直居中。 3. **Grid布局*...
- 绝对定位的div居中：利用`left: 0`, `right: 0`, `margin: 0 auto`，或者`top: 50%`, `left: 50%`，并用负`margin`调整 - 使用`flexbox`布局也可以方便地实现各种方向的居中 这些是前端开发中常见的CSS面试知识...
接着，通过设置`margin-left`为元素宽度的一半的负值，将元素拉回到中心位置。 ```css #wrapper { width: 720px; position: relative; left: 50%; margin-left: -360px; } ``` 4. **Flexbox布局** CSS3...
外层的`.ie6-out`通过`_margin-left`设定一个较大的负值，而内层的`.ie6-in`通过`_margin-left`设定同样大的正值来抵消这个负值，这样当内容宽度小于设定的最小宽度时，`.ie6-in`会保持在`.ie6-out`的右侧，从而达到...
方案一使用`float`属性，将左侧元素`.left`设置为固定宽度并浮动，然后右侧元素`.right`通过`margin-left`设定与左侧元素相同的宽度来达到自适应的效果。方案二同样利用`float`，但使用`calc`计算属性，`.right`的...