css - 简单的 CSS 图像并排

Question

我在溢出框内并排显示图像时遇到问题。

他们似乎要走到盒子的尽头，然后出于某种原因进入新的线路。

这是我得到的：

<div style="overflow-x:auto; overflow-y:hidden; white-space:nowrap; width:500px; height:145px;">
<?php
for ($i=1; $i<=9; $i++) { 
echo "<table><tr><td>";
echo "<img src=\"images/store/" . $i . ".jpg\" height=\"100px\" />"; 
echo "<br /><center><img src=\"images/store/buy.png\" width=\"75px\" /></center></td></tr></table>";
} 
?>
</div>

任何帮助都会很棒！

Answer 1

我建议您更好地更新和格式化您的代码，然后解决您遇到的问题。

1. 不要使用 PHP 回显 HTML 标签。

2. 不要使用直接应用于标签的内联样式（使用类/ID）

3. 不要将表格用于非表格数据。

话虽如此，这是一个我认为您正在努力实现的工作示例：

http://jsfiddle.net/a8yDv/

PHP/HTML：

<div class="images">
    <ul>
    <?php for ($i=1; $i<=9; $i++) : ?>
        <li>
            <img src="images/store/<?php echo $i; ?>.jpg" class="top-image" alt="" />
            <img src="images/store/buy.png" class="bottom-image" alt="" />
        </li>
    <?php endfor; ?> 
    </ul>
</div>

CSS：

.images {
    border: 5px solid red;
    height: 145px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 500px;
}

.images ul { 
    list-style-type: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.images li {
    display: inline-block;
    text-align: center; 
}
.images img {
    display: block;
    margin: 0 auto;
}

.images img.top-image {
    height: 100px;
    margin-bottom: 5px;
}

.images img.bottom-image {
    width: 75px;    
}

/* Clearfix - http://css-tricks.com/snippets/css/clear-fix/ */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Answer 2

您可以white-space:nowrap;在您的样式中使用该属性：

div {
  overflow-x:auto; 
  overflow-y:hidden; 
  white-space:nowrap; 
  width:500px; 
  height:100px;
}

演示。

Answer 3

我相信我真正拥有的只是一个错误，@Yamo 似乎为我指出了这一点。现在一切正常！

<div style="overflow-x:auto; overflow-y:hidden; white-space:nowrap; width:500px; height:145px;">
<table><tr>
<?php
for ($i=1; $i<=9; $i++) { 
echo "<td><img src=\"images/store/" . $i . ".jpg\" height=\"100px\" />"; 
echo "<br /><center><img src=\"images/store/buy.png\" width=\"75px\" /></center></td>";
} 
?>
</tr></table>
</div>