收缩包装/收缩以适合在css中重新填充浮动div的div?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (60)

我在试着的大小大小为It‘这是一条线。因此,当窗口大于所有S合并,所以它们都排在一排,但是当窗口变小时,S被重新返回到下一行,宽度为100%,而不是收缩包装。

我之所以想这样做,是因为我可以在内容的上方设置一个菜单栏,以缩小合并的内容的大小。

HTML:

<div class="wrapper">
    <div class="content">
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
    </div>
</div>

CSS:

.item {
    float: left;
    width: 70px;
    border: 1px solid black;
}

.content {
    display: inline-block;
    border: 1px solid black;

}
.content:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
提问于
用户回答回答于

我不太确定是要删除容器上的100%宽度,还是根据屏幕的大小让容器与内容一起缩小。

在我看来,问题在于当我缩小屏幕时,右边的最后一个“Hello”会向下推到下一行。

因此,我所做的就是将100%宽度设置为包装器。然后,我从项目中移除固定宽度,并将其更改为%宽度。在这个例子中,我取了盒子的数量,并将它们分成100%个,即每个框20%个(但是1 px边框,我每个减少到19%个)。

热门问答

扩展能力之云调用,小程序端出错:[tcb-js-sdk]参数错误:非法的应用标识?

software微软、谷歌、腾讯、阿里、百度……
推荐
您好,appSign必须是小程序的appid,appSecret的两个字段必须是在云开发控制台-安全来源里配置过的。 image.png ... 展开详请

serverless db 如何管理?

Richel码农
推荐
1.支持pg_dump,psql工具进行数据导入和导出。 2.本地CLI,可以使用postgresql的客户端psql,也可以使用dbeavr,navicate,pgadmin等工具访问。 3.支持操作DB ,要自己写逻辑 ... 展开详请

安卓APP使用免费版加固后,在Android11系统上运行闪退,是什么原因?

hello,目前已经适配了Android R Beta1,预计这周内上线移动应用安全在线版,请留意日志更新

请问bugly上报的服务器是在哪?如果要发行海外版本,能把上报服务器调成海外吗?

在cos 使用 javascript uploadFiles 函数,报 403,求解?

galenye

腾讯 · 工程师 (已认证)

对象存储专业搬砖工
推荐

可以发一下403时候返回的requestId,我们再帮查询下

对象存储, 版本控制,没有提供对象的历史版本列表的查询API吗?

所属标签

扫码关注云+社区

领取腾讯云代金券