1

我应该如何用 CSS 制作这个：

我想有 2 个 div，一个在另一个里面。父 div 应占窗口宽度的 100%，子 div 应具有固定边距，同时流体宽度应填充父级剩余宽度的 100%。（父 div - 孩子的 2 个边距）

很明显如何使用 javascript 来完成这个，但我想知道是否有可能只使用 CSS 和 HTML 来完成这个。

示例图片

PS应该对ie8+有效

4

4 回答 4

1

CSS：

<style type="text/css">
.parent {
width: 100%;
overflow: hidden;
background: #ccc;
}

.child {
width: auto;
margin: 30px;
padding: 30px;
background: #eee;
}

body {
margin : 0;
padding: 0;
}
</style>

HTML：

<div class="parent">


    <div class="child">Child Container</div>

</div>
于 2013-07-30T06:18:44.900 回答
0 
HTML
<div class="main_div">
<div class="inner_div">
    <div >sfdsd</div>
</div>
</div>

CSS
body {
margin : 0;
padding: 0;
 }
.main_div {
width: 100%;
height: 200px;
background: #ccc;
text-align: center;

}

.inner_div {
width: 90%;
margin: 50px auto;
background: #eee;
display: inline-block;
text-align: left;
height: 100px;

}

于 2013-07-30T06:58:24.557 回答
0

在这种情况下，我经常设置padding外部的属性div而不是设置margin内部的属性div：

#outer {
  border: 1px solid #000;
  padding: 50px; /* this is the important thing, others are for demo purpose only*/
  height: 100px;
}

#inner {
  background: red;
  height: 100%;
}

和 HTML

<div id="outer"><div id="inner"></div></div>

现场演示

于 2013-07-30T07:14:07.233 回答
-4

你想要这样吗？

演示：jsfiddle.net/G5qD3

于 2013-07-30T06:26:40.380 回答