Question

我正在努力使可调节的父div适合内容：（我希望右侧加宽的白色空间消失） http://jsfiddle.net/TDq7T/42/

max-width：和width：fit-content或auto，不要一起工作

#parent {
  display: block;
  max-width:40%;
  overflow:hidden;
  background: rgba(255,255,255,1.0);
}

#child {
   display: block;
   width:50px;
   height:50px;
   background: rgba(0,0,0,1.0);
   float:left;
   margin: 10px;
}

我尝试更改显示模式，剪辑：自动，宽度：自动添加另一个子显示但无效：（

Answer 1

在display: flex;上使用#menu（并删除float: center）：

http://jsfiddle.net/d3rp294u/

Answer 2

我不确定这是你想要的，但我会试一试。

var menu = document.createElement('div');
menu.id = 'menu';
document.body.appendChild(menu);



var d = document.createElement('div');
d.id = 'child';
document.body.appendChild(d);

var e = document.createElement('div');
e.id = 'child';
document.body.appendChild(e);

var f = document.createElement('div');
f.id = 'child';
document.body.appendChild(f);

var g = document.createElement('div');
g.id = 'child';
document.body.appendChild(g);

var h = document.createElement('div');
h.id = 'child';
document.body.appendChild(h);



menu.appendChild(d);
menu.appendChild(e);
menu.appendChild(f);
menu.appendChild(g);
menu.appendChild(h);

#menu {
  padding: 0;
  margin: 0;
  max-width: 280px;
  overflow: hidden;
  background: #ccc;
  display: flex;
  float: center;
  -webkit-flex-flow: row wrap;
  -moz-justify-content: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
#child {
  background: rgba(0, 0, 0, 1.0);
  width: 50px;
  height: 50px;
  margin: 10px;
  align-self: flex-start;
  display:
}

Answer 3

因为你使用javascript来生成html元素我相信用javascript（jquery）来设置它们也不会有问题：

http://jsfiddle.net/TDq7T/75/

function calculate_m_width() {
    var d_width= $(document).width();
    var m_width= Math.floor((d_width*.4)/70)*70;
    $("#menu").css("width",m_width);
}

calculate_m_width();

window.onresize = function() {
    calculate_m_width();
}

每次调整浏览器大小时，菜单的宽度将重新计算为elemnets的数量x宽度（50 + 2x10）

CSS：自动调整表，其最大宽度可剪切到内容宽度

3 个答案: