Горизонтально прокручиваемый стол, подобный структуре div

Я хотел бы создать таблицу, подобную структуре div, которая помещается в контейнер, может прокручиваться по горизонтали и не прерываться. Я написал структуру, но когда контент становится длиннее контейнера, он помещает остальную часть содержимого в новую строку.Горизонтально прокручиваемый стол, подобный структуре div

Вот мой код до сих пор: http://jsfiddle.net/rcdzdyv7/2/

, где все эти элементы представляют собой «таблицу» строку:

<div class="header">...</div> 
<div class="body">...</div> 
<div class="footer">...</div>

Моя цель состоит, чтобы сделать эти строки один подкладке и посмотреть, как если он была таблицей. Как я могу это решить?

источник

2015-05-28 Kiss Koppány

Почему бы просто не использовать таблицу? Они существуют по какой-то причине ... В противном случае вы можете прочитать это: http://snook.ca/archives/html_and_css/getting_your_di – Kamelkent

, вероятно, мне нужно будет исправить первый столбец, и это звучит проще я должен сделать это с помощью div. Спасибо за статью :) –

Вы не можете использовать float:left, потому что, когда контент достигает ширины, нет возможности избежать плавающих элементов «прыжки», на следующую строку (без изменения структуры html).

Однако вы можете использовать display:inline-block, потому что ваши элементы таким образом могут поменять их поведение на имущество white-space:nowrap.

В основном:

.container { 
     width: 500px; 
     overflow-x: scroll; 
    } 
    .header { 
     width: auto; 
     display:inline-block; 
     background-color: #D9D9D9; 
     white-space: nowrap; 
     clear: both; 
    } 
    .body { 
     display:inline-block; 
     margin: 5px 0; 
    } 

    .body-row { 
     background-color: #E5EBFF; 
     display:inline-block; 
     clear: both; 
     white-space: nowrap; 
    } 
    .footer { 
     clear: both; 
     background-color: #D9D9D9; 
     white-space: nowrap; 
    } 
    .row-title { 
     width: 300px; 
     display:inline-block; 
    } 
    .row-content { 
     width: 150px; 
     display:inline-block; 
    } 
    .value {    
     width: 100%; 
    }

как в этом FIDDLE

источник

2015-05-28 14:03:35

Работает как очарование, спасибо! –

Ты добрый. Рад, что смог помочь. Gl с вашим проектом –

спасибо @Alvaro :) –

Вы могли бы использовать:

.row-content { 
    width: 150px; 
    display: inline-block; 
}

вместо:

.row-content { 
    width: 150px; 
    float: left; 
}

Позвольте мне знать, если это работает!

источник

2015-05-28 13:55:57

Отлично работает, спасибо! Я принял другой ответ, поскольку он был более объяснен и исправлен весь мой код css, иначе этот ответ был бы принят. –

попробовать эти свойства CSS к <div>, для которого вы хотите свитком

div { 
    overflow-x: scroll; 
    overflow-y: hidden; 
}

надеюсь, что это то, что вы хотите!

источник

2015-05-28 13:59:57 Mayur

Это потому, что вы используете DIV с ограниченной шириной без установленной высоты. , поэтому, когда требуемая ширина будет слишком высокой для ширины контейнера, она будет автоматически выполняться под. Надеюсь, это имеет смысл. Уступка может заключаться в использовании встроенного блока, лично я бы рекомендовал использовать классическую таблицу, но только мое мнение

источник

2015-05-28 14:02:19 keikoku92

Горизонтально прокручиваемый стол, подобный структуре div

ответ

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