Плавающий Div, последний частично видимый

Question

У меня есть макет, где осталось 6 плавающих делений, чтобы сделать 6 столбцов поперек.6-й столбец, вероятно, приведет к тому, что общая ширина этих объектов будет шире, чем у большинства пользователей.Возможно ли, чтобы этот шестой был частично видимым (все, что шире, чем окно, стало скрытым), а не шестой столбец, перенесенный в новую строку под остальными.Диаграмма ниже.

                                        \
  +----+ +----+ +----+ +----+ +----+ +--/
  |  1 | | 2  | | 3  | | 4  | | 5  | | 6\
  |    | |    | |    | |    | |    | |  /
  |    | |    | |    | |    | |    | |  \   Screen Edge
  |    | |    | |    | |    | |    | |  /  <---
  +----+ +----+ +----+ +----+ +----+ +--\
                                        /

Answer 1

Конечно, вы можете сделать это с помощью следующей разметки и CSS:

HTML

<div id="columns">
    <div id="wrap">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>    
    </div>
</div>

CSS

#columns {
   width: 600px;
   overflow: hidden;   
}

#wrap {
   /* width of 6 columns and their margins */
   width: 660px;   
}

.col {
   float: left;       
   width: 100px;

   /* visual styles only */
   margin: 5px;
   height: 100px;
   background: red;
}

Вы можете увидеть результат здесь .

Причина для контейнера #columns состоит в том, чтобы установить переполнение скрытым.#wrap затем гарантирует, что плавающие элементы не будут отброшены, если у них недостаточно места (даже при переполнении: скрытый набор, плавающие элементы будут отброшены, если их родительский контейнер недостаточно широк).

Answer 2

Поместите 6 делений в 7, который имеет фиксированную ширину.

<div class='wrapper'>

<div class='floater'></div>
<div class='floater'></div>
<div class='floater'></div>
<div class='floater'></div>
<div class='floater'></div>
<div class='floater'></div>

</div>

.wrapper{
  width:1200px;
}
.floater{
  width:200px;
  float:left;
}