正確的方法，使元素與水平滾動

小提琴：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像素寬，包括填充。

爲了讓他們都在同一行我做父容器elemenet 16 * 200像素寬。如果有16個盒子，我會把它做成3200px寬。

我有2個問題。

1：我怎樣才能避免設置父容器元素的寬度，並仍然在同一行上的所有框？

2：當我使用瀏覽器進行縮小時，最後一個框跳下2行。

來源

2013-11-20 scootergrisen

是否使用任何服務器端腳本添加的盒裝來劃分的隨機數？ – Zword

是的，我希望能夠改變框的數量，而不必設置寬度。現在我計算X * 200 serverside的寬度，但如果可能的話，我不想這樣做。 – scootergrisen

最簡單的解決方案有一字排開沒有關於整體的廣泛的知識中的所有框結合使用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; 
}

演示

Try before buy

Try before (centered horizontally)

來源

2013-11-20 12:42:55 insertusernamehere

很酷，正是我所期待的。我一直在避免顯示：我的網站的內聯塊，因爲我讀它不支持這麼多。但現在似乎是很好的支持。所以我會嘗試一下。 – scootergrisen

當我添加.spotlysholder {vertical-align：top; } Internet Explorer顯示一個垂直滾動條。這裏發生了什麼？底部和中部不顯示垂直滾動條。 – scootergrisen

如果只有4個盒子和沒有水平滾動條，我還想把盒子放在中間。 – scootergrisen

一個的jsfiddle會更有益，還是試試這個：

添加到您的CSS .spotlysholderholderb > a {display:block;float:left}

將<div class="clearboth"></div>外spotlysholderholderb DIV類。

讓我知道它是否有幫助！ :)

來源

2013-11-20 12:25:36 NoobEditor

jsfiddle不想成爲我的朋友沒有權利。當我點擊保存時沒有任何反應。我不能讓你的代碼更好。如果我刪除了3200的寬度，那麼這些方塊會包裝在2個或更多的linies上。 – scootergrisen

爲你添加了小提琴！ :) – NoobEditor

對於盒我會做的隨機數是：

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'}); 
});

來源

2013-11-20 12:50:00 Zword

我不想使用JavaScript/jQuery這一點。我希望最乾淨的方式來做到這一點。 – scootergrisen

注：由於沒有使用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>";

來源

2013-11-20 13:00:07 Zword

正確的方法，使元素與水平滾動

回答

相關問題