Question

我有一个布局，其中将有6个Divs向左浮动以产生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容器的原因是将overflow设置为hidden。 #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;
}

浮动Div，最后部分可见

2 个答案: