Question

<body>
<div id="div01"></div>
<div id="div02"></div>
<img id="img01" src="...">
</body>

css

body{
width:90%;
margin:0 auto;
background-color:gold;
}

div01，div02和img01分别为100px，200px和300px宽度。

身体的孩子的宽度是动态变化的。

根据最大的孩子，如何设置身体的弹性宽度？不使用javascript，只需要纯css。

例如，如果img01变为250px body，则应为250px。如果div01变为400px body，则应为400px。并且仍然保持水平居中。

Answer 1

你最好的选择是：

body {
    width: auto;
}

这会告诉您的浏览器根据内部元素的大小计算body的大小。您可以在此处查看更多文档：http://www.w3schools.com/cssref/pr_dim_width.asp

Answer 2

我建议不要将<body>用作可变宽度元素 - 标准方法是包装器<div>。例如：

<body>
  <div id="wrap">
    <img src="http://placehold.it/300x200" />
    <img src="http://placehold.it/200x300" />
    <img src="http://placehold.it/400x100" />
    [ other variable width content ]
  </div>
</body>

和CSS

body{
    text-align:center;
}
#wrap{
    display:inline-block;
}

http://jsfiddle.net/daCrosby/Teq6N/

如何使身体标签弹性？

2 个答案: