`

div嵌套的div溢出时换行

 
阅读更多
<style>
.nobreak 
{
  word-wrap: break-word; word-break: normal; width:400px;
}
</style>
<div class="nobreak" >
  <div style="float:left;margin:1;padding:0;width:100px;background-color:red;">1</div>
  <div style="float:left;margin:1;padding:0;width:100px;background-color:blue;">2</div>
  <div style="float:left;margin:1;padding:0;width:100px;background-color:green;">3</div>
  <div style="float:left;margin:1;padding:0;width:100px;background-color:black;">4</div>
  <div style="float:left;margin:1;padding:0;width:100px;background-color:yellow;">5</div>
  <div style="float:left;margin:1;padding:0;width:100px;background-color:#2FF8FF;">6</div>
</div>


也可以用以下方法,但以下方法不可设置item的宽与高

<style>
.nobreak 
{
  word-wrap: break-word; word-break: normal; width:400px;
}
</style>
<div class="nobreak" >
  <div style="display:inline;width:100px;background-color:red;">1</div>
  <div style="display:inline;width:100px;background-color:blue;">2</div>
  <div style="display:inline;width:100px;background-color:green;">3</div>
  <div style="display:inline;width:100px;background-color:black;">4</div>
  <div style="display:inline;width:100px;background-color:yellow;">5</div>
  <div style="display:inline;width:100px;background-color:#2FF8FF;">6</div>
</div>
分享到:
评论

相关推荐

    网页制作基础之AP DIV元素 旧本适用PPT学习教案.pptx

    在学习 AP DIV 元素时,需要注意以下几点: 1. AP DIV 元素的溢出与裁切。 2. AP DIV 元素的嵌套和转换。 3. AP DIV 元素与表格的转换。 通过学习 AP DIV 元素,可以提高网页设计的自由度和灵活性,创造出更加美观...

    css两端对齐之div+css布局实现2端对齐的4种方法总结

    div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将...该方法需要外面多嵌套一层来实现,通过元素的间距,做为中间层的margin溢出值来实现 &lt;style&gt; .box{ width:300px;margin:auto;overflow:

    html中设置让div中的内容超出后自动显示滚动条

    在这个例子中,我们有两个嵌套的div,外层的div有一个"classlist"类,内层的div则有"autoScroll"类。`&lt;asp:RadioButtonList&gt;` 和两个 `&lt;asp:ImageButton&gt;` 是ASP.NET控件,它们在这里代表实际的内容,可以替换为你...

    Dreamweaver-CS5自学教程-第八课:AP-DIV元素.pdf

    - 溢出处理:当内容超出AP DIV层的边界时,可以设置显示滚动条或者隐藏超出部分(剪切)。 - 剪切设置:通过输入剪切的宽度和高度来控制内容的显示范围。 5. 层的嵌套: - 嵌套原理:一个AP元素的代码位于另一个...

    Dreamweaver-CS5自学教程-第八课:AP-DIV元素.docx

    1. **溢出处理**:当层内容超出可视区域时,可以设置溢出为滚动条显示、隐藏或自动。 2. **剪切**:通过设置剪切值,可以裁剪层的某些部分不显示。 **层的嵌套** 1. **嵌套原理**:一个AP DIV的代码位于另一个AP ...

    iframe中页面显示不全1

    2. 在`&lt;div&gt;`中嵌套`&lt;iframe&gt;`时,调整`&lt;div&gt;`的尺寸以容纳`&lt;iframe&gt;`。 3. 使用CSS进行定位,如`position: absolute`和`width: 100%, height: 100%`,确保`&lt;iframe&gt;`充满`&lt;div&gt;`。 4. 考虑响应式设计和自适应内容,...

    div_css布局.rar

    3. 嵌套规则:CSS允许在已有的选择器内部嵌套其他选择器,以实现更精确的样式控制。 4. 浮动(float):浮动主要用于创建多列布局,通过设置`float:left;`或`float:right;`可以使元素向左或向右浮动,让其他元素环绕...

    css+div建站,很好的css+div学习的ppt

    8. **预处理器**:Sass、Less等CSS预处理器允许使用变量、嵌套规则、混合和函数,提高代码的可读性和可维护性。 9. **最佳实践**:编写高效的CSS,避免使用内联样式,保持样式表的组织有序,使用语义化的HTML元素,...

    无需图片实现div圆角

    4. **高度控制**:为了确保圆角的平滑过渡,还需要对某些嵌套元素的高度(`height`)进行控制,如“rtopb”、“rbottomb”类下的元素高度设置为1像素或2像素,同时使用`overflow:hidden`隐藏多余的溢出部分,确保...

    Div+CSS布局的十六条技巧及详细用法-DivCSS教程.pdf

    13. **合理使用table**:虽然现代布局倾向于使用Div+CSS,但在展示数据表格时,表格仍然有其优势,不应完全避免使用。 14. **单像素边框表格**:通过设置`border-collapse:collapse;`和`border:solid 1px;`,可以在...

    CSS解决未知高度的DIV垂直居中

    但对于那些高度未知或者动态变化的元素,尤其是嵌套在另一个未知高度的容器中的元素,垂直居中就变得有些复杂了。本文将详细介绍一种有效的解决方案,该方法不仅适用于标准浏览器,同时也提供了一种兼容非标准浏览器...

    DIV+CSS网页设计规范总结.pdf

    未正确设置可能导致内容溢出或布局错位。同时,合理利用display属性和position属性也能帮助优化布局效果。例如,使用display:flex或grid可以创建更灵活的响应式布局,position属性则可用于精确控制元素的位置。 总...

    Dreamweaver.CS4.完全自学教程2

    - **溢出**:管理内容超出APDiv边界时的行为。 - **剪辑**:控制内容显示的区域。 3. **APDiv的基本操作** - **激活与选择APDiv**:这是进行编辑和属性调整的前提。 - **插入内容**:在APDiv中添加文本、图像、...

    layui表格内容溢出的解决方法

    从给定文件内容来看,解决layui表格内容溢出的方法主要是通过在TD标签内部嵌套一个DIV标签,并对DIV进行相应的CSS样式设置。具体操作如下: 1. 在TD标签内部插入一个DIV标签,DIV的宽度应该小于或等于TD的宽度。 2...

    css之自动换行实现代码

    总结一下,CSS在实现自动换行时,不同的浏览器可能需要不同的方法。正常情况下,使用`white-space: normal;`足以处理大多数文本换行的情况。而在处理连续的英文字符和数字时,需要根据浏览器的不同使用`word-wrap`或...

    CSS div布局需要注意的两点

    首先,当我们在一个已经设置了具体长宽值的父div中嵌套一个新的div时,必须保证内部div可以完全容纳于父div的尺寸范围内。如果内部div超出了父div的边界,就会出现溢出的情况。在CSS中,溢出可以通过overflow属性来...

    css表格单元格中的长文本如何实现自动换行

    最后,如果想在`td`或`th`元素中嵌套div或p元素,可以采用之前提到的对应于div和p的换行方法,这同样适用于IE和Firefox浏览器中的处理。 在实际应用中,需要注意的是,虽然这些方法可以有效解决长文本在表格单元格...

    DIV CSS布局大全

    学习布局时,首先需要确定布局的结构,接着定义body的样式和主要的div。对于高度自适应的设计,可以通过百分比或视口单位(如vh, vw)来设置高度,保证布局的灵活性和响应性。 8. **不使用表格的菜单设计**: 不...

Global site tag (gtag.js) - Google Analytics