精华内容
下载资源
问答
  • HTML如何使两个div在同一行

    千次阅读 2019-08-07 15:12:31
    两个div标签在同一行,需两个div的样式加上style="display: inline;" 记得两个都要加,因为块级元素前后都有换行符。 <html> <head> <script src=...

    让两个div标签在同一行,需两个div的样式加上style="display: inline;"  记得两个都要加,因为块级元素前后都有换行符。

    <html>
    <head>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
        <div  id="s1" οnclick="fun1();" style="display: inline;">
            
            <p style="display: inline;">
                1、HTML所有标签分为  块元素 和内联元素,块元素(如div标签)前后都默认有换行符,自动换行一个标签占一行。
            </p>
            <p style="display: inline;">2、内联元素(如a标签)不自动换行。</p>
            <p style="display: inline;">块元素的display属性设为inline变为内联元素</p>
        </div>
        <div style="display: inline;">我是第二个DIV</div>
    </body> 
    <script type="text/javascript">
        function fun1(){
            document.write("<div>You Can</div>")
           // alert(document.getElementById('s1').innerText);
            //alert(document.getElementById('s1').innerHTML);
        }
    </script>
    </html>

    展开全文
  • 在界面设计的时候,经常需要将两个div在同一行显示。 但是每次都会忘记怎么做,特此随笔,备忘。 如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1"> /*外层div*/ <div id="id2" ...

    在界面设计的时候,经常需要将两个div在同一行显示。

    但是每次都会忘记怎么做,特此随笔,备忘。

    如以下要将“第一个div”和“第二个div”显示在同一行:

    <div id="id1">  /*外层div*/

        <div id="id2" style="width:100px;height:20px;">第一个div</div>

        <div id="id3" style="width:100px;height:20px;">第二个div</div>

    </div>

    只需要对id2和id3增加css样式即可,如下所示:

    <div id="id1">  /*外层div*/

        <div id="id2" style="width:100px;height:20px;float:left;">第一个div</div>

        <div id="id3" style="width:100px;height:20px;float:left;">第二个div</div>

    </div>

    这样就可以了。很简单吧。

     

    2016.09.20 修改补充

    在此随笔发出的几个小时之后,有大神提出了质疑:没有清除浮动,并给我了一个差评。

    哈哈哈哈。感谢这位大神的指正。

    那下面就清除一下浮动吧。

    以下面代码为例进行说明:

    (1)

    <div id="id1" style="width:300px;border:1px solid black">  

        <div id="id2" style="width:100px;height:20px;float:left;border:1px solid red">第一个div</div>

        <div id="id3" style="width:100px;height:20px;float:left;border:1px solid blue">第二个div</div>

    </div>

    代码(1)的截图为,可以看到,id2和id3并没有在id1中。这就是没有清除浮动的效果。

    清除浮动的方法:

    1、对父级设置合适的高度:对父级设置合适的高度进行清除浮动,父级内内容的高度为20px+2px=22px,在id1中增加样式height=“22px”即可。

    效果图:

    缺点:对父级设置合适的高度来清除浮动的这种方法必须要知道父级内容的高度。比较不方便。

    2、clear:both清除浮动:在父级元素结束前,增加以下红色代码,清除浮动。

    <div id="id1" style="width:300px;border:1px solid black"> 


        <div id="id2" style="width:100px;height:20px;float:left;border:1px solid red">第一个div</div>

        <div id="id3" style="width:100px;height:20px;float:left;border:1px solid blue">第二个div</div>

        <div id="id4" style="clear:both"></div>  /*增加此句,清除浮动*/


    </div>

    效果图:

    3、父级div定义overflow:hidden清除浮动:

    id1增加overflow:hidden样式,即可清除父级元素内使用float:left/float:right产生的浮动。

    效果图:

     

    以上是清除浮动的三种方法,望大神指教。

    参考:http://www.divcss5.com/jiqiao/j406.shtml

    转载于:https://www.cnblogs.com/xiaobaodejimama/p/5885114.html

    展开全文
  • Html两个div 显示在同一行

    万次阅读 2016-02-22 15:01:09
    两个 div 显示在同一行 标题 div{ display:inline; } 我是第一个Div 我是第二个Div

    让两个 div 显示在同一行

    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>标题</title>
    <style type="text/css">
    div{
    	display:inline;
    }
    </style>
    </head>
    
    <body>
    <div>我是第一个Div</div>
    <div>我是第二个Div</div>
    </body>
    
    </html>


    展开全文
  • html实现div在同一行

    2021-02-23 22:02:51
    使用弹性布局完成div在同一显示,应用在导航中。 # js实现深拷贝 ...1 在同一中有两个div <!DOCTYPE html> <html> <head> <title>测试</title> <style type="t...

    使用弹性布局完成div在同一行显示,应用在导航中。

    # js实现深拷贝 

    # let dataTextAll = new Array();
    # let dataTextDate = JSON.parse(JSON.stringify(dataTextAll));

     

    1 在同一行中有两个div

    <!DOCTYPE html>
    <html>
    <head>
        <title>测试</title>
        <style type="text/css">
            .data{
                width: 100px;
                display: flex;
            }
            .data_left{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .data_right{
                white-space: nowrap;
                /* 自动向右对齐 */
                margin-left: auto;
            }
        </style>
    </head>
    <body>
    <!--两个div使用弹性布局 -->
    <div class="data">
        <div class="data_left">
            左侧尽量显示,内容超出宽度显示省略号
        </div>
        
        <div class="data_right">
            右侧靠右
        </div>
    </div>
    </body>
    </html>

     

    2 在同一行中有多个div弹性布局

    使用弹性布局和盒布局

    <!DOCTYPE html>
    <html>
    <head>
        <title>测试</title>
        <style type="text/css">
            .data{
                /*注意:此处使用width无效*/
                display: flex;
            }
            .data>div{
                box-sizing: border-box;
                /* 如果 div高度不一样,让div顶部对齐使用vertical-align*/
                /*vertical-align: top;*/
            }
            .data_left{
                width:300px;
                background-color: #E6A23C;
            }
            .data_middle{
                flex: 1;
                background-color: #909399;
            }
            .data_right{
                background-color: #67C23A;
                width:300px;
            }
        </style>
    </head>
        
    <body>
    <!-- 多个div使用弹性布局与盒布局 -->
    <div class="data">
        <div class="data_left">
            左侧
        </div>

        <div class="data_middle">
            中间
        </div>
        
        <div class="data_right">
            右侧
        </div>
    </div>
    </body>
    </html>

    展开全文
  • 使用float属性把两个div的内容放置在同一行: 我在右侧 我在左侧 结果图:
  • 代码: <div style="background: blue;float:left"> aaa </div> <div style="background: green;float:left"> bbb </div> 效果:
  • 话不多说,因为都是前端东西,这里只做引用参考: https://www.cnblogs.com/xiaobaodejimama/p/5885114.html
  • html使多<div>在同一行

    千次阅读 2016-07-11 13:43:41
    div是块级元素,是独占一行的一般情况下,两个相邻的div是不会处于同一行的。 例如: html代码: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...
  • 如图,有一个父级div1,两个子级div2、div3 div1固定宽度,但是有overflow:auto div2固定宽度,float:left div3最小宽度是1000,float:left,但是会超出div1的宽度。 现在div2和div3是上下排列了,并没有在同一...
  • 当你想用js把div内容清空,有两个选择 第一 dom对象 document.getElementById("div_food").innerHTML="";第二 jquery对象 $("#div_food").html("");引出了二者的转化问题 jQuery对象转成DOM对象: 两种转换方式将...
  • 让div,span等块级、非快级元素排列在同一行by:授客QQ:1033553122例子:让两个div排列在同一行给div添加float样式div{float: left;}div1div2说明:让div和span排列在一起也可以用上述上方法例子:让div和两个span...
  • 让div,span等块级、非快级元素排列在同一行...例子:让两个div排列在同一行 给div添加float样式 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style> ...
  • <div class="post-text" itemprop="text"> <p>I couldn't find an answer to my scenario, at least couldn't manage to implement one properly. I'm using Tsoha-Bootstrap and Twig and have a form that ...
  • 1.将多个元素设置为同一行:float,inline-block 清除浮动的方式: ...方法三:利用:after和:before来元素内部插入两个元素块,从面达到清除浮动的效果。 .clear{zoom:1;} .clear:after{content:””;cl...
  • 我正在使用Zend_Form输出我的表单,我正在尝试将按钮元素分组,然后将它们添加到字段集中.我管理的最好的是:SubmitCancelResetButton其中两...我想要实现的是:SubmitCancelResetButton两个div在一个显示组中的位置....
  • css 并排放置两个div

    千次阅读 2019-07-16 17:12:13
    今天写代码时遇到了并排放置两个div的需求,所以总结了一下,共有以下几种方法: (1)设置浮动: a)两个div都设置为左浮动: <!DOCTYPE html>...放置两个div在同一行</title> <st...
  • 为了让两个 table 可以并列排列在同一行,我将两个 table 都包裹在了各自的 div 里边, <html> <body> <h1 id="div2" align="center" style="margin-bottom:0px;padding-bottom:0px;font-size:1....
  • HTML5 - DIV+CSS完成首页布局

    千次阅读 2017-07-08 17:25:48
    :默认在同一行1.1CSS的概述 层叠样式表 美化HTML HTML相当于网站的骨架 CSS对骨架进行美化1.1.1CSS的基础语法 CSS的基本语法通常包含两个部分:一个是选择器,一个声明。 选择器{属性:属性值;属性:属性值。。。} ...
  • Html初学篇——CSS和DIV

    2019-01-11 18:11:33
    第一步,先认识一下常见的两个块标签div 和 span 使用: &lt;body&gt; ...-- div标签:块标签,默认自动换行 --&...-- span标签:快标签,内容显示在同一行 --&gt; &lt;span&gt;赵武&
  • HTML】解决DIV消除浮动问题(clear)

    千次阅读 2018-10-19 14:44:45
    知识点: 清除(clear)的意思可以理解为把这个元素...就相当于这个元素右边的内容会被排除开,但是左边的不会,仍然可以在同一行显示。 1.在一个大盒子里面放两个浮动的小盒子,这种情况大盒子会认为自己里面没内...
  • html,css相关

    2018-01-02 10:53:00
    p标签 段落元素 自动换行 span标签 行内元素 对行内元素不同效果进行定义 ...为使两个div在同一水平内应设置浮动 将前一个div设置浮动 padding 内边距 设置了内边距后 当写div内的一些其他标...
  • 消息採用div+float布局,每条消息用一个DIV标签包裹,里面再放两个DIV分别用来包裹用户图标和用户消息内容。左側消息,先清除浮动,然后设置 float:left。这样用户图标和消息内容就能够显示在同一行了,当中用户...
  • HTML和CSS3。。。。。

    2017-08-26 14:49:03
    两个div大层。为什么会显示在同一行,怎样才能显示出两行? <div style="width:100%"> <div style="float:left; width:100px">啊啊啊啊啊</div> <div style="float:left; width:100px">擦擦擦擦擦擦</div> </div> ...
  • HTML+CSS基础之浮动

    2017-12-11 20:24:12
    使元素脱离文档流且块级元素在同一行显示 浮动一般情况 当第一个div左浮动以后,后面一个div也会直到遇到前面这个div就会停下来 浮动特殊情况: 1. 当两个盒子,我只给第一个盒子浮动的时候,假如后面宽度和...
  • 步骤1:布局消息採用div+float布局,每条消息用一个DIV标签包裹,里面再放两个DIV分别用来包裹用户图标和用户消息内容。左側消息,先清除浮动,然后设置 float:left。这样用户图标和消息内容就能够显示在同一行了,...
  • 步骤1:布局消息採用div+float布局,每条消息用一个DIV标签包裹,里面再放两个DIV分别用来包裹用户图标和用户消息内容。左側消息,先清除浮动,然后设置 float:left。这样用户图标和消息内容就能够显示在同一行了,...
  • 2016/07/18 HTML学习笔记

    2016-07-18 16:05:02
      : 这东西在 html 里是空格占位符...上图说明block和inline不会在同一行显示。即使是这样: 1 12 也会分成行显示。 div占用的位置是一行, span占用的是内容有多宽就占用多宽的空间距离。 继承 某id/
  • 步骤1:布局消息采用div+float布局,每条消息用一个DIV标签包裹,里面再放两个DIV分别用来包裹用户图标和用户消息内容。 左侧消息,先清除浮动,然后设置 float:left,这样用户图标和消息内容就可以显示在同一行了...

空空如也

空空如也

1 2 3 4
收藏数 62
精华内容 24
关键字:

html两个div在同一行