html锁定div大小,html – 拉伸固定到底部父div以div子宽度

你去：

http://codepen.io/n3ptun3/pen/PPgWNb

您不需要使用display：inline-block.

我已经单独留下了你的HTML,并简化了你的一些CSS：.card-container和.footer不需要float：left;和宽度：100％;它们都是块级元素,因此它们占据宽度的100％,并且它们不需要任何东西来包裹它们.

在.main-container上,你不能设置margin：0 auto;和位置：固定;位置：固定;消除了通过保证金居中的能力.左：0;和右：0;拉伸主容器的大小,所以需要删除.宽度：100％;和最大宽度：400px;试图修复宽度问题,但这不允许根据内容调整大小.

相反,你需要设置左：50％; (将元素的左边缘放在父节点宽度的50％处,即视口宽度,在这种情况下)然后变换：translate(-50％);将元素向左移回其宽度的50％.从而将元素带到窗口/视口的中心.

现在,如果您删除其中一个“卡片”,它将调整“主容器”的大小,同时将所有内容固定在底部并居中.

.main-container {

position: fixed;

bottom: 0;

left: 50%;

transform: translate(-50%);

box-shadow: 0 0 15px #B3B3B3;

border-top-left-radius: 3px;

border-top-right-radius: 3px;

text-align: center;

}

.card-container {

color: #3B3D3D;

height: 105px;

}

.card {

width: 100px;

float: left;

}

.footer {

color: #FFFFFF;

background: #0095D3;

height: 45px;

}

编辑：根据您的新信息(重新：增加宽度或添加“卡”),我发现问题在于.main-container上的左侧位置.当您将元素放置50％并且其宽度超过父元素的50％时,它将运行到父div的右侧,然后您将获得堆叠.要解决此问题,您可以改为删除float：left;在.card上添加display：flex;在.card-container上.这将允许您增加“卡”的宽度,同时防止它们堆叠.

.main-container {

position: fixed;

bottom: 0;

left: 50%;

transform: translate(-50%);

box-shadow: 0 0 15px #B3B3B3;

border-top-left-radius: 3px;

border-top-right-radius: 3px;

text-align: center;

}

.card-container {

color: #3B3D3D;

height: 105px;

display: flex;

}

.card {

width: 100px;

// float: left;

}

.footer {

color: #FFFFFF;

background: #0095D3;

height: 45px;

}