父div宽度不设定 子div宽度是固定值 想让父div居中显示且宽度随子div增多而增加 并且子div是居左显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了父div宽度不设定 子div宽度是固定值 想让父div居中显示且宽度随子div增多而增加 并且子div是居左显示相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.contents margin:0 auto; overflow:hidden; padding:10px; background:#eee; text-align:center;
.main border:1px solid #ccc; text-align:left; zoom:1; display:inline-block;
.div_box display:inline-block; width:100px; height:100px; background:#ddd; margin:10px;
</style>
</head>
<body>
<div class="contents">
<div class="main">
<div class="div_box"></div>
<div class="div_box"></div>
<div class="div_box"></div>
<div class="div_box"></div>
<div class="div_box"></div>
<div class="div_box"></div>
<div class="div_box"></div>
<div class="div_box"></div>
</div>
</div>
</body>
</html>
我这样写 当子div个数少的时候是正确的 一旦子div个数多了 就不对了 求大家帮忙
要想居中，只能给父div设一个宽度追问
父级div的宽度不可以随子div的宽度增加而增加吗
追答是可以的，这相当于width：auto;在这种情况下是没法用margin:auto;来居中的
追问那这样情况要怎么解决呢？
追答给父div设个高度吧。或者如果只有一个子div的话还要父div干嘛呢
CSS 的设置 div子节点怎么自适应 父节点的高度呢 父节点没有设置高度值的
参考技术A 如果某个div设置了高度，你可以获取这个div的高度，然后可以把这个高度给任意一个div赋值。var height_num=document.getElementById("divID").height;
var object_div=document.getElementById("childDiv");
object_div.height=height_num; 参考技术B 你没有设置高度，怎么来的自适应呢？
我认为默认不设置高度适应的都是内容的高度，不论这个内容来自于子div还是父Div 参考技术C 父节点没有设置高度值那么应当是父层适应子层的高度追问
你说的有道理
父节点需要适应一个子节点 然后另一个子节点再适应父节点
以上是关于父div宽度不设定 子div宽度是固定值 想让父div居中显示且宽度随子div增多而增加 并且子div是居左显示的主要内容，如果未能解决你的问题，请参考以下文章
如何通过 CSS 实现一个左边固定宽度 右边自适应的两列布局