Я провел слишком много времени на работе сегодня, думая об этом, поэтому я решил спросить интернет-улей.
У меня есть стандарт <ul> с числом <li> элементов (в настоящее время 12, но могут отличаться).Я хотел бы расположить их в 2 столбца одинаковой ширины, В то же время не делая ширину блока <ul> полной шириной.Решение также должно поддерживать IE11, к сожалению (не ранее).Любое решение также должно быть отзывчивым, поэтому не следует задавать непроцентную ширину.Я испробовал несколько разных сценариев (вам нужно развернуть фрагмент до полного экрана):
Решение 1 (сетка):
*{
box-sizing: border-box;
}
div{
display: flex;
justify-content: center;
}
ul{
list-style: none;
margin-top: 0;
margin-bottom: 0;
padding: 0;
display: inline-grid;
grid-template-columns: repeat(2, 1fr);
}
li{
padding: 15px;
}
<div>
<ul>
<li>In maximus viverra scelerisque. Vestibulum dignissim ex non</li>
<li>Sed suscipit, turpis in suscipit consectetur, ante sem.</li>
<li>Ut et mauris et dui gravida fringilla ut.</li>
<li>Nullam iaculis fermentum sodales. Proin commodo eleifend lacus.</li>
<li>Sed molestie, libero at hendrerit sollicitudin, enim nisi.</li>
<li>Mauris a facilisis dolor. Sed pharetra hendrerit dolor.</li>
<li>Sed vitae felis tellus. Quisque sagittis, felis vitae.</li>
<li>Integer et elit metus. Cras congue vestibulum hendrerit.</li>
<li>Fusce suscipit ante sed tristique euismod. Duis quis.</li>
<li>Vestibulum quam felis, fringilla in justo malesuada, tristique.</li>
<li>Integer volutpat quam sed urna iaculis mollis. Maecenas.</li>
<li>Nullam dignissim ipsum vitae finibus dignissim. Nam viverra.</li>
</ul>
</div>
Это решение по существу работает идеально - оно размещает <li> s в 2 столбцах, UL центрируется в содержащем flex div.Но, конечно, у IE есть проблемы, и хотя я мог бы использовать префиксы IE в старой спецификации , мне все равно нужно было бы вручную назначать позицию столбца / строки для каждого li, что невозможно для списка, которыйпотенциально может иметь любое количество элементов.
Решение 2 (flex):
*{
box-sizing: border-box;
}
div {
display: flex;
justify-content: center;
}
ul {
list-style: none;
margin-top: 0;
margin-bottom: 0;
padding: 0;
display: inline-flex;
flex-wrap: wrap;
}
li {
padding: 15px;
width: 50%;
}
<div>
<ul>
<li>In maximus viverra scelerisque. Vestibulum dignissim ex non</li>
<li>Sed suscipit, turpis in suscipit consectetur, ante sem.</li>
<li>Ut et mauris et dui gravida fringilla ut.</li>
<li>Nullam iaculis fermentum sodales. Proin commodo eleifend lacus.</li>
<li>Sed molestie, libero at hendrerit sollicitudin, enim nisi.</li>
<li>Mauris a facilisis dolor. Sed pharetra hendrerit dolor.</li>
<li>Sed vitae felis tellus. Quisque sagittis, felis vitae.</li>
<li>Integer et elit metus. Cras congue vestibulum hendrerit.</li>
<li>Fusce suscipit ante sed tristique euismod. Duis quis.</li>
<li>Vestibulum quam felis, fringilla in justo malesuada, tristique.</li>
<li>Integer volutpat quam sed urna iaculis mollis. Maecenas.</li>
<li>Nullam dignissim ipsum vitae finibus dignissim. Nam viverra.</li>
</ul>
</div>
Хотя это решение технически приемлемо (работает достаточно хорошо, включая IE11), проблема здесь заключается в визуальной привлекательности.Поскольку <ul> теперь охватывает всю ширину, несмотря на то, что он находится по центру в содержащем flex div, <li> s, охватывающие 50% текста с выравниванием по левому краю, оставляют большое пространство визуального пробела с правой стороны каждого столбца (широкий экраннужно было увидеть дополнительное пространство).
Решение 3 (таблицы для IE11):
Я не собираюсь публиковать фрагмент для этого, поскольку он был наименее привлекательным.По сути, это было связано с целевым назначением IE11, установкой <ul> на display:table;, установкой <li> s на display:table-cell; float: left; width: 50%; ... Короче говоря, это был беспорядок, который все еще не работал визуально.
Должен ли я просто сократить свои потери и перейти к решению 2?Я бы очень хотел получить визуальное оформление решения 1, если это возможно ... Есть идеи?