多个div放置在同一行

最新推荐文章于 2022-11-08 16:54:25 发布
最新推荐文章于 2022-11-08 16:54:25 发布
阅读量4k 收藏 1
点赞数 1
文章标签： div不换行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22048949/article/details/50537232
版权

1.float

<style type="text/css">
    .totalFieldDiv{
        margin-left:5px;
        margin-right:5px;
        background-color:#00CC66;
        width:180px;
        height:40px;
        float:left
        
    }
</style>
</head>
<body>
<div style="border:#000000 thin solid; height:40px; width:900px; overflow:auto">
    <div class="totalFieldDiv">        
    </div>
    <div class="totalFieldDiv">
    </div>
    <div class="totalFieldDiv">
    </div>
    <div class="totalFieldDiv">
    </div>
    <div class="totalFieldDiv">
    </div>
</div>
<script src="jquery-2.0.3.min.js"></script>
<script>

</script>
</body>

当设置浮动时，就不能够设置左右滚动条。

overflow：所有主流浏览器都支持 overflow 属性。

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

不能同float一起使用

overflow , overflow-y

visible：
    不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto：
    此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden：
    不显示超过对象尺寸的内容
scroll：
    横向显示滚动条


2.  display: inline-block;

<style type="text/css">
    #pull-left-attendTotalField{
        margin-left:10px;
         display: inline-block;
            overflow-y: auto;
            white-space: nowrap;
    }
    .totalFieldDiv{
        padding-left:5px;
        padding-right:5px;
       display: inline-block;
        background-color:#00CC66;
        width:180px;
        height:40px;
        
    }
</style>


<body>
<div id="pull-left-attendTotalField"   style="width: 781px;">
    <div class="totalFieldDiv">        
    </div>
    <div class="totalFieldDiv">
    </div>
    <div class="totalFieldDiv">
    </div>
    <div class="totalFieldDiv">
    </div>
    <div class="totalFieldDiv">
    </div>
</div>
</body>

display:

white-space:





qq_22048949
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端 - 让多个块级元素div在同一行显示的3种方式
qq_19783793的博客
03-15 2781
div 同行显示 布局
多个div并排不换行
weixin_30547797的博客
07-16 493
1.所有div的父元素不换行 white-space: nowrap; 2.所有div设置为行内元素display: inline-block; 基于java记账管理系统【尚学堂·百战程序员】 转载于:https://www.cnblogs.com/Caixingmin/p/11195717.html...
多个div排列在同一行而不换行
Kiloveyousmile的博客
05-09 3万+
有时候，我们可能会产生多个div标签横向排列而不换行的需求，具体有以下几种实现方法：1. 同级div设置display:inline-block，父级div强制不换行例如：<html> <head></head> <body> <div id="container"> <div class="lable">测试测试</div> <div class="lable">测试测试</d
将多个DIV放在一行显示的三种方法（超简洁，一目了然）
qq_37967853的博客
11-08 1万+
将多个DIV放在一行显示的三种方法（超简洁，一目了然）
多个div放在同一个行
qq_40895460的博客
05-17 335
display 属性规定元素应该生成的框的类型，他能满足我们的这个需求.。 但必须要注意一个div里面有内容和无内容很影响布局包(括空格符)。 可以切换使用试一试 display: inline-flex display:inline-block .... 这样可以达到目的 ...
两个div在同一行且不换行的两种方法
09-25
当两个或多个元素都有相同的浮动方向时，它们会在同一行内排列，直到没有足够的空间容纳它们，才会开始换行。 **优点：** - 简单易用，适用于大部分情况。 - 可以与其他浮动元素灵活组合，创建复杂的布局。 **缺点...
div多列等高处理，实现多个div等高
07-20
在网页设计中，让多个div元素在同一行内保持等高是一项常见的需求，这可以使得页面布局更加美观且统一。在本篇文章中，我们将深入探讨如何使用div实现多列等高处理，以及相关的关键技术和方法。 首先，让我们了解...
可拖动可改变大小div的实现代码
12-10
`用于让元素向左或向右浮动，常用于创建多列布局或在本例中，将标题元素和图标元素放在同一行。 6. **内边距**：`padding`属性为元素内部添加空间，如`.dialogbody`的`padding:10px;`。 7. **响应式元素**：`....
网页 Demo，div+css
05-11
在网页 Demo 中，我们可能会看到如何使用`div+css`实现常见的布局模式，如流式布局（适合屏幕宽度变化的自适应布局）、网格布局（将页面划分为多个单元格）、响应式布局（根据设备屏幕尺寸调整布局）等。`div`可以...
asp.net多页签页面切换
05-06
在ASP.NET开发中，实现多页签页面切换是一种常见的用户界面设计，它可以提供更好的用户体验，让用户在一个页面上浏览和操作多个相关的内容区域。本篇将详细介绍如何在ASP.NET环境中实现这样的功能，主要涉及的知识点...
html小技巧之td,div标签里内容不换行
10-25
主要介绍了td,div标签里内容不换行的方法,需要的朋友可以参考下
多个div在同一行显示
xizhilang87的专栏
09-10 925
以下为css样式：div{ margin-bottom: 10px; clear:both; word-break:break-all; word-wrap:break-word; }.custom_div{height: 23px;width: 50px;line-height: 23px;float: left;} 以下为html代码： jelly1 jelly2
大div中有多个div，这些div在同一行显示，溢出后产生滚动条而不换行
技术前端，忠于热爱 @回忆哆啦没有A梦
07-04 2336
大div中有多个div，这些div在同一行显示，溢出后产生滚动条而不换行
两个div在同一行，两个div不换行
jerayc的专栏
04-21 1万+
很多时候，我们的两个div会在同一行，很多时候我们想让他们同行时，却不能如愿，div会换行，我们为div不能在同一行烦恼，这里提供两个方法。 当然，真的没办法的时候我们只好借助table来实现效果了
如何让多个div块排列在一行而不会出现因浏览器宽度不够换行的情况
qq_41497443的博客
07-08 1457
让多个div块排列在一行而不会出现因浏览器宽度不够换行的情况 示例代码 <template> <div class="home-container"> <!--左侧大块--> <div> <p style="width:100%;height:20px;font-size:14px;font-family:PingFangSC-Medium,PingFang SC; font-weigh
css实现多个div在同一行并且div中内容可断行
大海无量的博客
12-24 4209
实现效果： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt;      .all{         display:-moz-box; /* Firefox */         display:-webkit-box; /* Safari and Chrome */         display:box;       ...
如何让多个div横向排列而不换行
热门推荐
vcxiaohan的博客
12-15 6万+
现象 多个div排列在一行，包裹的框宽度不足时，那么会换行显示 如图 解决 关键点在于white-space: nowrap;的使用 效果 代码<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
如何让多个div不换行
lchSAIL的博客
10-26 2万+
前几天做项目遇到一个小问题，如何让多个div不换行。现在把解决的办法记录下来（通过white-space解决的）请看下面这段代码<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div会换行</title> <style> .container{
多个行内元素在同一行垂直居中的几种方式
最新发布
07-14
有几种方法可以实现多个行内元素在同一行垂直居中的效果，以下是其中几种常见的方式： 1. 使用 `display: flex` 和 `align-items: center`：将行内元素的父容器设置为弹性容器，并使用 `align-items: center` 属性来垂直居中行内元素。 ```html <div style="display: flex; align-items: center;"> <span>文本1</span> <span>文本2</span> </div> ``` 2. 使用 `display: inline-block` 和 `vertical-align: middle`：将行内元素设置为 `display: inline-block`，并使用 `vertical-align: middle` 属性来垂直居中行内元素。 ```html <span style="display: inline-block; vertical-align: middle;">文本1</span> <span style="display: inline-block; vertical-align: middle;">文本2</span> ``` 3. 使用绝对定位和负边距：将行内元素设置为绝对定位，并使用负边距来使其垂直居中。 ```html <div style="position: relative;"> <span style="position: absolute; top: 50%; transform: translateY(-50%);">文本1</span> <span style="position: absolute; top: 50%; transform: translateY(-50%);">文本2</span> </div> ``` 4. 使用表格布局：将行内元素放置在一个 `<table>` 中，并使用表格的属性来垂直居中。 ```html <table> <tr> <td style="vertical-align: middle;">文本1</td> <td style="vertical-align: middle;">文本2</td> </tr> </table> ``` 请注意，这些方法可能会根据具体情况和需求而有所变化。根据实际情况选择适合的方式来实现多个行内元素在同一行垂直居中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值