Question

如何创建一个从两侧修复的div（响应）。像这样的东西：

                               Screen (big)
+----------------------------------------------------------------+
|                                                                |
|....20px.....______________________________________....20px.....|
|            |                                      |            |
|            |                 div                  |            |
|            |______________________________________|            |
|                                                                |
|                                                                |
+----------------------------------------------------------------+




                Screen (small)
+--------------------------------------------+
|                                            |
|....20px.....__________________....20px.....|
|            |                  |            |
|            |       div        |            |
|            |__________________|            |
|                                            |
|                                            |
+--------------------------------------------+

应该注意的是，我的重点仅放在left和right方面。

现在实现这可能吗？

Answer 1

很简单。

JSFiddle

.wrap {
  padding: 20px;
  background: orange;
}
.child {
  height: 100px;
  background: #663399;
}

<div class="wrap">
  <div class="child"></div>
</div>

Answer 2

无需包装：

＆＃13;

<style>
div
{
	border: 1px solid red;
	margin: 0 20px;
}
</style>

<div>Hi!</div>

＆＃13;

Answer 3

这就是你追求的吗？ http://codepen.io/panchroma/pen/xGJPyX
用div左右填充20px的父div包裹div。

HTML

<div class="div-wrap">
  <div class="main-div"></div>
</div>

CSS

.div-wrap{
  padding-left:20px;
  padding-right:20px;
}
.main-div{
  background-color:pink;
  min-height:100px
}

Answer 4

这很容易实现，可能你想建立一个更复杂的布局？

只需使用所需的边距设置边距并使用普通div（显示：块）。您可能需要从padding和margin元素中删除body和html。 E.g：

HTML：

<html>
    <head>
        ...
    </head>
    <body>
       <div class="contents">...</div>
    </body>
</html>

CSS：

body, html {
  padding: 0px;
  margin: 0px;
}

.contents {
  margin: 0px 20px;
}

有关交互式示例，请参阅此fiddle。

如何使用各方固定大小实现动态宽度div

4 个答案: