Так вот как документ выглядит следующим образом:CSS макет выравнивание дна и центр
<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. Спасибо
ПРОБЛЕМА РЕШЕНА: Посмотрите на комментарий «Мэри Мелодия» ниже.
Для точки 1: Если вы определяете дивы, содержащие каждый граф как 'дисплей: инлайн-block' вместо плавающих их, будет легче центрировать их с помощью' Шрифтом- align' property контейнера –
попробуйте это - http://jsfiddle.net/kcpnkcup/ – Anonymous
Я думаю, что Мэри Мелоди получила ответ первым. см. выше ^^^ – Andrew