Правильный способ сделать элемент с горизонтальной прокрутки

Question

скрипку: http://jsfiddle.net/WsYw8/

Демка, что им говорят о: http://netkoder.dk/test/test0251.html

HTML

<div class="spotlysholderholder baggrundlinear1 bordertype1 borderradius5px"> 

    <div class="spotlysholderholderb" style="width: 3200px;"> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a> 
     <div class="clearboth"></div> 
    </div> 

</div> 

CSS

.spotlysholderholder { 
     overflow-x: auto; 
    } 

    .spotlysholderholderb { 
     padding: 4px; 
     margin: 0 auto; 
    /* width: 800px;*/ 
    } 

    .spotlysholderholderb a, 
    .spotlysholderholderb a:visited, 
    .spotlysholderholderb a:active { 
     color: #222; 
    } 

    .spotlysholder { 
     text-align: center; 
     width: 180px; 
     float: left; 
     margin: 4px; 
     padding: 5px; 
     text-decoration: none; 

     /* for at undgå at langeordudenmellem ikke går ud over kanten */ 
     overflow: hidden; 
     text-overflow: ellipsis; 
    } 

    .spotlysholder:hover { 
     background: #ccc; 
     text-decoration: underline; 
     border-color: black; 
    } 

    .spotlyoverskrift { 
     display: block; 
     font-weight: bold; 
     color: maroon; 
    } 

    .spotlysbillede { 
     margin: 5px auto; 
     vertical-align: bottom; 
    } 

    .baggrundlinear1 { 
     background-color: #445263; /* fallback */ 
     box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.4), inset -2px 0 2px rgba(0, 0, 0, 0.2), inset 0 -2px 2px rgba(0, 0, 0, 0.2), inset 2px 0 2px rgba(255, 255, 255, 0.4); 
    } 


    .bordertype1 { 
     border: 1px solid #7c7c7c; /* fallback farve når rgba ikke virker */ 
     border: 1px solid rgba(0,0,0,0.5); 
     border: 1px solid rgba(0,0,0,0.25); 
    } 

    .background_color_2 { 
     background-color: #ddd; /* fallback */ 
    } 

    .borderradius5px { 
     border-radius: 5px; 
    } 

    .spotlysbillede { 
     margin: 5px auto; 
     vertical-align: bottom; 
    } 

    .clearboth { 
     clear: both; 
    } 

У меня есть прокручиваемый элемент с 16 ящиками.

Каждая коробка шириной 200 пикселей, включая прокладку.

Чтобы сделать их все на одной строке, я делаю родительский контейнерный элемент размером 16 * 200 пикселей в ширину. Если есть 16 ящиков, я делаю их шириной 3200 пикселей.

У меня есть 2 проблемы.

1: Как я могу избежать установки ширины родительского элемента контейнера и все еще иметь все поля в одной строке?

2: Когда я использую браузер, чтобы уменьшить масштаб, последнее поле прыгает вниз, делая 2 строки.

Answer 1

Самое простое решение, чтобы все коробки выстроены без знания о целом широко используется display: inline-block в сочетании с white-space: nowrap; вместо плавающих элементов. Это не будет нарушаться при масштабировании. Использование элемента <body> является лишь примером. Вы также можете использовать обертку, такую ​​как <div class="spotlysholderholderb"> (придерживаться вашего примера) с теми же стилями, которые применяются, когда только часть вашей страницы должна прокручиваться по горизонтали.

HTML

<div> 
    <img src="http://placehold.it/200x100" alt=""> 
    <p>Box 1</p> 
</div> 

<div> 
    <img src="http://placehold.it/200x100" alt=""> 
    <p>Box 2</p> 
</div> 

CSS

body { 
    font-size: 0; 
    line-height: 0; 
    white-space: nowrap; 
} 

div { 
    display: inline-block; 
    width: 200px; 
    font-size: 14px; 
    line-height: 20px; 
} 

Demo

Try before buy

Try before (centered horizontally)

Answer 2

JSfiddle был бы более полезным, все еще попробовать это:

добавить к вашей CSS .spotlysholderholderb > a {display:block;float:left}

Место <div class="clearboth"></div> вне spotlysholderholderb DIV класс.

дайте мне знать, если это поможет! :)

Answer 3

Для случайного числа коробки, что я хотел бы сделать это:

1-> подсчитывают количество коробок.хранить их в текстовом поле, как:

<textarea id="count" style="visibility:hidden;">$count</textarea>

2-> Написать Jquery в конце страницы:

$(document).ready(function(){ 
    var cnt=parseInt(count.value); 
    var wid=cnt*200; 
    $("#parent_div").css({ width:''+wid+'px'}); 
}); 

Answer 4

Примечание: В соответствии с просьбой без JavaScript/JQuery.

Для случайного числа коробки, что я хотел бы сделать это:

1-> подсчитывают количество коробок $ сосчитать.

2-> Для PHP

$wid=$count*200; 

Echo "<div id='parent_div' style='width:".$wid.";'>"; 
any loop{ 
Echo "<div id='boxes'><div>"; 
} 
Echo "</div>";