DIV元素不换行

DIV盒子默认是换行独占100%宽度：
DIV盒子没有赋予CSS样式时，默认DIV盒子是独占一行（宽度为100%）。

如下默认情况HTML代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>div实例 www.dvicss5.com</title>
  6. </head>
  7. <body>
  8. <div>第一个div</div>
  9. <div>第二个盒子</div>
  10. </body>
  11. </html>

独占一行div盒子截图


2个div对象盒子独占一行，形成自动换行布局效果截图

通过以上DIV案例，我们可以观察到DIV的确默认情况下是独占一行宽度100%。

如何让DIV并排不换行呢？
1、对div设置float
2、对div设置display样式

1.对div设置float浮动样式   -   TOP

对div设置float:left样式相当于是让div对象靠左，自然失去了本身宽度样式。
让DIV+CSS实现DIV并排不换行实例代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>无标题文档</title>
  6. <style>
  7. div{ float:left}
  8. </style>
  9. </head>
  10. <body>
  11. <div>第一个div盒子</div>
  12. <div>第二个div盒子</div>
  13. </body>
  14. </html>

说明：我们对div设置了float:left

实例效果截图：


使用css浮动样式让div失去默认的100%宽度

2.对div设置display并排样式   -   TOP

通过对div设置display:inline样式让div同样失去默认100%独占一行的宽度。

display:inline意思是让对象并排显示。

1、实例HTML源代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>div并排实例 www.dvicss5.com</title>
  6. <style>
  7. div{ display:inline}
  8. </style>
  9. </head>
  10. <body>
  11. <div>第一个div盒子</div>
  12. <div>第二个div盒子</div>
  13. </body>
  14. </html>

2、实现不换行div效果截图


使用css display实现div不换行截图

总结：实现div不换行其实是让div默认独占一行的样式去掉，去掉可以使用float和display样式。

3.项目代码

<div class="line bolder" style="margin-top:-4px;float:left;">最新竞价：</div>
<div id="startPrice" class="line" style="padding-left:10px;margin:auto;margin-top:-4px;">7600（現場）</div>
<div class="line bolder" style="margin-top:-4px;float:left;">保留价：</div>
<div id="reservePrice" class="line" style="padding-left:10px;margin:auto;margin-top:-4px;">100</div>

4.截图

时间： 2024-10-08 05:56:08

DIV元素不换行的相关文章

js动态删除div元素

在做用户查找时 因为要把查找的结果动态加载和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态加载和显示.所以考虑到用js来搞. 这个for循环就是移除已有的表单.然后根据Ajax请求过来的数据,动态生成新的表单对象.一定要注意j变量从大往小循环,否则,删除div元素后会引起serchResultLenth=serchResult.children.length;长度的变化(这个问题摸索了好久,才搞定,切记) for(va

CSS3实现的div元素水平运动指定距离

CSS3实现的div元素水平运动指定距离:本章节分享一段,它实现了利用CSS3让div元素水平运动一段距离.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</

css控制div元素旋转指定角度代码实例

css控制div元素旋转指定角度代码实例:本章节介绍一下如何利用css3实现控制元素旋转指定角度的效果.在这里咱们就不考虑低版本的浏览器,因为随着时间的推移,低版本的浏览器会被逐渐淘汰,就算是当前,低版本浏览器的用户的占比也是很少了,下面直接看代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" conten

JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素

一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了看导航栏菜单项高亮显示时,已经写了部分内容,只是那时写的代码没有实现div显示和隐藏,现在就在之前编写的基础上,为页面添加显示和隐藏div的效果. 没有写JavaScript之前看到的效果: 实现后的效果图: 这个就是我们现在要做的效果. 1.背景: 我们在about.html页面中写了一个ul列表

每天一个JavaScript实例-从一个div元素删除一个段落

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-从一个div元素删除一个段落</title> <style> p{ padding:20px; margin:10px 0; width:

span元素和div元素的区别

span元素和div元素的区别:本章节简单介绍一下span元素和div元素的区别,因为这两个元素在布局中非常的常用,可以说几乎没有任何页面不适用这两个元素,下面就简单介绍一下它们两者的主要区别.一.元素的性质:span元素内联元素,而div元素是块级元素.关于两种类型元素的区别可以参阅什么是块级元素和内联元素一章节. 二.元素的使用方式:div元素主要是用作大的框架布局,而span元素则是主要用于对内容的修饰,比如颜色字体大小.代码如下: <!DOCTYPE html> <html>

hmtl 手机上 div元素 拖动

这是前端一个非常简单的功能,没什么复杂的原理:给div元素添加touch监听事件,然后改变div元素的位置状态. 下面是段简单的实现代码 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0" name="view

C# Html格式内容转Csv内容包括table(重点在rowspan和colspan合并),p,div元素

Html格式内容转Csv内容,包括table(重点在rowspan和colspan合并),p,div元素,table不能包含嵌套功能. 1 /// <summary> 2 /// Html格式内容转Csv内容包括table(重点在rowspan和colspan合并),p,div元素 3 /// </summary> 4 /// <param name="hrml"></param> 5 /// <returns></re

js使用div元素画柱形图

一.js使用div元素画柱形图 下面函数定义的是在id为chart的div中添加一个高度为height,宽度为width,柱形条间距为distance的柱形条:并根据高度值设置了不同的颜色,根据宽度的范围,选择合适的最大宽度.给柱形条添加了鼠标移入和移出的事件,移入显示该柱形条的信息,移出删除信息. 1 // 新增一个柱子 2 function addone(height,width,distance,value){ 3 var wrap = document.getElementById("c