Question

我应该如何使用CSS：

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

很明显如何使用javascript来实现这一点，但我想知道是否有可能仅使用CSS和HTML来实现这一点。

P.S。它应该对ie8 +

有效

Answer 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>

Answer 2

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;

}

Answer 3

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

margin

和HTML

div

live demo

Answer 4

你想这样吗？

DEMO：jsfiddle.net/G5qD3

固定保证金和流体宽度占父母的100％

4 个答案: