html - 当 Div 达到父 div 的宽度时换行

标签 html css word-wrap

<分区>

我正在开发一个文件上传系统:下面我有一张图片。我试图在内容到达父 div 的末尾时立即换行。我不太擅长 CSS,也不知道该怎么做。

我想尽可能避免使用表格。基本上有一个包含每个文件的父 div。每个文件都是它自己的 div。有没有办法让它在达到父 div 的宽度时换行?

image

如果需要,我还可以将元素更改为 span 或任何内容。

最佳答案

如果您将文件 DIV float 在包装器 DIV(带边框的那个)中,它们应该换行。

例如,使用这个 HTML 并应用这个 CSS:

.wrapper {
    width: 400px;
    height: 400px;
    border: 1px solid #000;
}

.item {
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #ddd;
}
<div class="wrapper">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

关于html - 当 Div 达到父 div 的宽度时换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16612712/

相关文章:

javascript - 图片在 Chrome 选项卡上加载正常,但在 React 代码中返回 403

css - Safari 中的水平菜单

c# - TextWrapping 属性设置为 WrapWholeWords 时获取参数不正确错误?

swift - 如何在 UiTextLabel 中将可选字符串设置为文本?

c++ - Vim 在 C++ 中自动硬包装长注释?

Java Proxy Servlet 在浏览器上显示原始 html

html - 样式引号

css - 从模板布局创建 css 和 div 的工具

html - 为什么 <li> 没有在 <img> 旁边缩进 float :left?

html - 网站的响应在 iphone 10 或任何 iOS 中不工作