Javascript-форум - Элементы по горизонтали без js

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Элементы по горизонтали без js (https://javascript.ru/forum/xhtml-html-css/36299-ehlementy-po-gorizontali-bez-js.html)

Цитата:

Сообщение от devote

не кроссбраузерно где? IE7 - only? пора уже забыть этот браузер

Ну да, не спорю. На IE7 сам постоянно забиваю. Это ошибка ~~природы~~ мелкософта, а не браузер. Я имел ввиду "костыльно, да еще при этом не будет работать в старых ослах"

Цитата:

Сообщение от danik.js

У ячеек таблиц можно выставить только желаемую ширину, и она не гарантируется. Если ячейку есть куда ужать, чтобы таблица в лезла в контейнер - ячейка будет ужата. То есть потребуются дивы-распорки. В итоге слишком костыльно и некроссбраузерно получится.

про таблицы не спорю, а сделанная таблица на CSS ведет себя не так как обычные таблицы:

<style type="text/css">
    div {
        display: table-cell;
        width: 100px;
        min-width: 100px;
        border: 1px solid #000;
    }
</style>
<div>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</div>
<div>1</div>
<div>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</div>
<div>2</div>

Вариант 2, насильно пытаемся растянуть блок, никаких распорок не нужно:

<style type="text/css">
    div {
        display: table-cell;
        width: 100px;
        min-width: 100px;
        border: 1px solid #000;
    }
</style>
<div>рррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррр</div>
<div>1</div>
<div>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</div>
<div>2</div>

Вариант 3, не даем растягиваться:

<style type="text/css">
    div {
        display: table-cell;
        width: 100px;
        min-width: 100px;
        max-width: 100px;
        border: 1px solid #000;
    }
</style>
<div>рррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррррр</div>
<div>1</div>
<div>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</div>
<div>2</div>

Вот про min-width я не подумал. Круто)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
 
        #container {
            width: 700px;
            height: 100px;
            margin: 30px auto;
            border: 1px solid #ccc;
            overflow-x: scroll;
        }
 
        #ruler {
            border: 1px solid #FF0000;
            display: table;
            height: 20px;
        }
 
        #ruler div {
            border-right: 1px solid #999966;
            display: table-cell;
            height: 20px;
            min-width: 99px;
            width: 99px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="ruler">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</body>
</html>

devote, разницы в поведении нет. Просто возможны расхождения из-за отсутствия display:table-row элемента.
Убери в коде выше min-width и ты поймешь о чем я говорил.

Цитата:

Сообщение от danik.js

devote, разницы в поведении нет. Просто возможны расхождения из-за отсутствия display:table-row элемента.
Убери в коде выше min-width и ты поймешь о чем я говорил.

В любом случае все зависит от конкретно поставленной задачи. А переживать из-за ИЕ7 нет смысла. Я давно использую такой подход и меня он вполне устраивает. А на ИЕ7 мне срать. (Хотя честно скажу для ИЕ7 есть костыли в CSS написанные на expression, это если уж очень приспичит)