当前位置：文江博客话题详情

一旦达到 div 高度，强制 div 中的列表项浮动

发布于 2025-01-02 15:47:19 字数 99 浏览 2 评论 0原文

我有一个高度固定的 div，位于动态无序列表内。

当前列表项溢出了 div。
需要做的是浮动列表项，以便它们不会溢出 div。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泛泛之交 2025-01-09 15:47:20

您可以使用 css3 列：

这里是 jsfiddle

HTML:

<div class="container">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</div>

CSS:

.container{
    background: #00f;
    height: 400px;
    width: 200px;
    overflow: hidden;

  -webkit-column-count: 2;  -webkit-column-gap: 15px;
     -moz-column-count: 2;     -moz-column-gap: 15px;
          column-count: 2;          column-gap: 15px;

}
li
{
    background: #ff0;
    height: 45px;
    margin: 5px 0 0 0;
    width: 50px;
}

You could use css3 columns:

here is the jsfiddle

HTML:

<div class="container">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</div>

CSS:

.container{
    background: #00f;
    height: 400px;
    width: 200px;
    overflow: hidden;

  -webkit-column-count: 2;  -webkit-column-gap: 15px;
     -moz-column-count: 2;     -moz-column-gap: 15px;
          column-count: 2;          column-gap: 15px;

}
li
{
    background: #ff0;
    height: 45px;
    margin: 5px 0 0 0;
    width: 50px;
}

回复收藏 0 原文

鸢与 2025-01-09 15:47:20

您可以将 div 的 overflow 属性设置为各种值。

如果您只是希望截断列表，您可以考虑使用 hidden；如果您希望用户能够看到完整列表，则可以考虑使用 scroll。

#myDiv{
   overflow:hidden;
   height:200px;
}

示例

假设您的主要标准是列表项不溢出 div。如果您希望物品以某种方式堆叠，那么可以使用不同的方法来实现此目的。主要的一个是划分你的li并浮动这些容器。

A List Apart 上有一篇关于此的文章/articles/css3multicolumn/" rel="nofollow">多列列表。

You can set the overflow property of the div to various values.

You may consider using hidden if you simply want the list to cut off, or perhaps scroll if you want the user to be able to see the full list.

#myDiv{
   overflow:hidden;
   height:200px;
}

Example

This is assuming that your main criteria is for the list items to not overflow the div. If you wish for the items to stack somehow then there are different methods available to acheive this. The main one is the divide up your li's and float those containers.

There's an article about this on A List Apart on Multi Column Lists.

回复收藏 0 原文

~没有更多了~