浮动的 Div，最后部分可见

Question

我有一个布局，其中将有 6 个 div 向左浮动以形成 6 列。第 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;
}

你可以看到the result here。

#columns 容器的原因是将溢出设置为隐藏。 #wrap 然后确保浮动在没有足够空间的情况下不会下降（即使设置了溢出：隐藏，如果父容器不够宽，浮动也会下降）。

Answer 2

将 6 个 div 放入具有固定宽度的第 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;
}