用水平滚动制作元素的正确方法

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像素，包括填充。

为了让它们全部在同一条线上，我将父容器elemenet设置为16 * 200像素宽。如果有16个盒子，我将它设为3200px宽。

我有两个问题。

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

<强>演示

Try before buy

Try before (centered horizontally)

Answer 2

一个JSfiddle本来会更有帮助，还是试试这个：

1 将此添加到您的css .spotlysholderholderb > a {display:block;float:left}

2 将<div class="clearboth"></div>放在spotlysholderholderb div class之外。

让我知道它是否有帮助!! ：）

Answer 3

对于随机数量的盒子，我会做的是：

1-＆gt;计算box的数量。将它们存储在文本字段中：

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

2-＆gt;在页面末尾写下Jquery：

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

Answer 4

注意：根据要求不使用javascript / JQuery。

对于随机数量的盒子，我会做的是：

1-＆gt;计算$ count的数量。

2-＆gt;对于PHP

$wid=$count*200;

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