дисплей: встроенный блок и высота 100% для достижения «плавающего»

У меня есть <ul> <li>, и мне нужно использовать display: inline-block;. Это необходимо для того, чтобы «плавать» ли, пока последний элемент на 100% больше его родительского контейнера, и может быть любое количество li (плавающее означает, что количество li ограничено в зависимости от ширины его содержащего элемента) , Таким образом, общая ширина <ul> будет больше ширины окна просмотра.дисплей: встроенный блок и высота 100% для достижения «плавающего»

Это хорошо, за исключением того, что я нуждаюсь в «плавающих» элементах для многострочной линии, и я ожидаю, что все элементы, которые не имеют многослойных, будут на 100% высотой <ul>.

Я могу добиться того, что хочу, установив высоту <ul> в JS, но это то, что я действительно не хочу делать.

Настоящая скрипка JS. http://jsfiddle.net/d5WBv/3/

У кого-нибудь есть решение. Я не уверен, что flexbox или display: table; могут решить эту проблему, но я не могу ее получить ....

Спасибо!

источник

2013-09-27 Matt Derrick

[как это?] (Http://jsfiddle.net/peteng/d5WBv/5/) – Pete

Спасибо за ответ! Высота работает, но мне нужно, чтобы последняя li была на 100% шириной окна просмотра (так что общий UL шире экрана). –

Я не думаю, что это возможно с чистым css, как будто вам нужно, чтобы они были одинаковой высоты, а затем добавление таблицы или flex означает, что дочерний lis займет пространство своего родителя, а не видового экрана, и любой другой способ будет сделайте высоту первых 2 lis не такой высокой. поэтому в любом случае вам нужно js для вычисления высоты или ширины. Как и в стороне, почему вы хотите, чтобы последняя ячейка была такой же широкой, как область просмотра? если у вас был небольшой видовой экран, вы можете сделать другие 2 клетки действительно высокими – Pete

Я предполагаю, вы имеете в виду, что все лики должны иметь одинаковую высоту?

Если да, то вы могли бы отображать их в виде ячеек таблицы:

ul { 
    display: table; 
    width: 100%; 
} 

li { 
    vertical-align: top; 
    display: table-cell; 
    padding: 10px; 
    margin: 0; 
}

Кроме того, проверьте updated fiddle.

источник

2013-09-27 10:15:44 LinkinTED

Вот что предложил пей в приведенном выше комментарии. Мне нужно, чтобы последний li был на 100% шире. –

У меня есть CSS решения для Вас, проверить это Working Fiddle

Даунсайда: требует удвоить ulli элементов, (один из них для принятия реального пространства в потоке документов (он надевает «т визуализации, как мы хотим, но так будет скрыт), и один из них показал, на вершине другого, с дисплеем, который вы хотите

HTML:.

<div class="Container"> 
    <ul class="Hidden"> 
     <li>This stays on one line</li> 
     <li>And this</li> 
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.</li> 
    </ul> 
    <ul class="Visible"> 
     <li>This stays on one line</li> 
     <li>And this</li> 
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.</li> 
    </ul> 
</div>

CSS:

* 
{ 
    padding: 0; 
    margin: 0; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.Container 
{ 
    position: relative; 
} 

.Hidden 
{ 
    visibility: hidden; 
} 

.Visible 
{ 
    position: absolute; 
    top: 0; 
    height: 100%; 
} 

ul 
{ 
    white-space: nowrap; 
    background-color: #cccccc; 
    font-size: 0; 
} 
li 
{ 
    display: inline-block; 
    padding: 10px; 
    border-right: 1px solid red; 
    background-color: #2c2c2c; 
    text-align: center; 
    color: #fefefe; 
    white-space: normal; 
    vertical-align: top; 
    font-size: 16px; 
    height: 100%; 
} 

li:last-child 
{ 
    width: 100%; 
    border-right: 1px solid #2b2b2b; 
}

источник

2013-09-27 12:26:10 avrahamcool

Я вижу, что вы здесь делаете!Я бы хотел избежать дублирования разметки, чтобы добиться этого, на самом деле я думаю, что лучше использовать JS-решение для увеличения размера DOM. Спасибо за эту идею. –

дисплей: встроенный блок и высота 100% для достижения «плавающего»

ответ

Смежные вопросы