Простые CSS-изображения Side By Side

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

Я считаю, что все, что у меня действительно было, было ошибкой, и @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> 

Answer 2

Вы можете использовать white-space:nowrap; свойство в ваших стилях:

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

Demo.

Answer 3

Я бы рекомендовал обновить и форматировать код лучше, а затем решить проблему, которую вы имеете.

1. Не отсылайте HTML-теги с помощью PHP.

2. Не используйте инлайн-стили, применяемые непосредственно в тег (классы использования/IDS)

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 */