Question

这就是文档的样子：

<div class="middle-row">
        <div class="middle-row-titles">
            <h2>This is a header</h2>
            <p>This is a paragraph</p>
        </div>
        <div class="middle-row-graphs">
            <div class="graph-column columnss">
                <h2>12%</h2>
                <div class="graph first-graph">
                </div>
                <p>caption four</p>
            </div>
            <div class="graph-column columnss">
                <h2>18%</h2>
                <div class="graph second-graph">
                </div>
                <p>caption three</p>
            </div>
            <div class="graph-column columnss">
                <h2>22%</h2>
                <div class="graph third-graph">
                </div>
                <p>caption two</p>
            </div>
            <div class="graph-column">
                <h2>23%</h2>
                <div class="graph fourth-graph">
                </div>
                <p>caption one</p>
            </div>
            <div style="clear: both"></div>
        </div>

    </div>

如您所见，它有4列代表图表。我有两个问题：

如何将所有这些图表放在中心而不是将它们留在左侧？
有没有办法将这些条形对齐到父div的底部？栏杆的标题和底线应该处于相同的高度。

我想在没有flexbox的情况下实现这些，因为它在IE中不起作用。谢谢

问题已解决：看看＆＃34; Mary Melody＆＃34;评论如下。

Answer 1

在图表列中插入新的div，只使用位置相对和绝对值

.graph-column {
    position: relative;
    height: 222px;
    width: 150px;
}
.column-inside {
    position: absolute;
    bottom: 0;
}
.column-inside h2 {
    text-align:center;
}

<div class="graph-column columnss">
   <div class="column-inside">
       <h2>12%</h2>
       <div class="graph first-graph">
       </div>
       <p>caption four</p>
   </div>
</div>

你可以在这里查看http://jsfiddle.net/3ty4gvda/3/

Answer 2

要将所有这些图表放在中心位置，您可以尝试margin:0 auto到必须定位到中心的容器div。下面的代码将有助于获得第2点的解决方案：

HTML：

<div class="middle-row">
            <div class="middle-row-titles">
                <h2>This is a header</h2>
                <p>This is a paragraph</p>
            </div>
            <div class="middle-row-graphs">
                <div class="graph-column">
                <div class="graph-column-inner columnss">
                    <h2>12%</h2>
                    <div class="graph first-graph">
                    </div>
                    <p>caption four</p>
                </div>
                </div>
                <div class="graph-column">
                <div class="graph-column-inner columnss">
                    <h2>18%</h2>
                    <div class="graph second-graph">
                    </div>
                    <p>caption three</p>
                </div>
                </div>
                <div class="graph-column">
                <div class="graph-column-inner columnss">
                    <h2>22%</h2>
                    <div class="graph third-graph">
                    </div>
                    <p>caption two</p>
                </div>
                </div>
                <div class="graph-column">
                <div class="graph-column-inner columnss">
                    <h2>23%</h2>
                    <div class="graph fourth-graph">
                    </div>
                    <p>caption one</p>
                </div>
                </div>
                <div style="clear: both"></div>
            </div>

        </div>

CSS：

.middle-row, .bottom-row {
    background-color: #e4e4e4;
    margin: 0;
}
.middle-graphs {
    background: #e4e4e4;
}
.bottom-thumbs {
    background: #e4e4e4;
}
.middle-row-graphs {
    /*display: -ms-flex;
    -ms-align-items: flex-end;
    justify-content: center;*/
    margin: 2% auto 0;
    width: 960px;
}
.graph-column {
    text-transform: uppercase;
    margin-left: 5px;
    margin-right: 5px;
    float: left;
    height:100%;
    width:25%;
    max-width:230px;
}
.columnss h2 {
    margin-top: ;
}
.middle-row-graphs div:first-child h2 {
    color: #005d83;
}
.middle-row-graphs div h2 {
    font-weight: 700;
}
.graph {
    background-color: #999999;
    width: 100px;
    margin: 0 auto;
}
.first-graph {
    height: 60px;
    background-color: #005d83;
}
.second-graph {
    height: 90px;
}
.third-graph {
    height: 115px;
}
.fourth-graph {
    height: 120px;
}
.middle-row-titles h2 {
    padding-top: 2%;
    margin: 0;
}
.middle-row-titles p {
    margin: 0;
}
.graph-column-inner{
    position:absolute;
    bottom:0;
}

Answer 3

您的代码中只需进行少量更改（在父级上添加文本对齐，显示：内联块+删除chlidren上的浮动）。你可以删除清算div。

.middle-row-graphs {
    display: block;
    margin: 2% auto 0;
    width: auto;
    text-align: center;
}

＆安培;

.graph-column {
    text-transform: uppercase;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
}

css布局对齐底部和中心

3 个答案: