• 所有问题

    • HTML CSS DIV 前端 看我详细说明，

    HTML CSS DIV 前端
    看我详细说明，div1里面有两个DIV分别是A和B，

    A设置有固定高度，B的高度为auto，

    B里面有一个8个ul，ul的高度为auto，并且设置了向左浮动，

    ul里面有一个li，li设置了固定高度，

    问题是:我给div1、B、ul设置了边框线后发现，这三个的高度居然是0，这是什么原因？(div1、A、B、ul均未设置浮动)

    举报该问题
    推荐答案   2016-11-16

    最好的方法就是把代码实现一遍，然后因为很多元素没有设置高度和宽度，是被撑不起来的，你看到的也就是空的了，设置了边框只看到了一条线。不是高度为0，而是你里面没有填充内容，要不高度没被撑起来，要不宽度没被撑起来。

    注：你一开始说ul设置左浮动，最后括号里有写到ul没有设置浮动。

    如下代码，ul为浮动，实现过程：

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
        <title>Document</title>
    <style>
      *{padding:0;margin:0;}
      .div-a{height: 200px;}
      .div-b{height: auto;}
      ul{height: auto; float: left;background:gray;border:1px solid green;}
      li{height:120px;}
      .div1{background:red;border:1px solid #000;height:auto;}
      .div-b{background:#ccc;boder:1px solid blue;}
    </style>
    </head>
    <body>
    <div class="div1">
        <div class="div-a"></div>
        <div class="div-b">
        div-b的内容
          <ul>
            <li>第一个ul下的li</li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
        </div>
    </div>
    </body>
    </html>

    如下代码，ul不浮动，实现过程：

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
        <title>Document</title>
    <style>
      *{padding:0;margin:0;}
      .div-a{height: 200px;}
      .div-b{height: auto;}
      ul{height: auto; background:gray;border:1px solid green;}
      li{height:120px;}
      .div1{background:red;border:1px solid #000;height:auto;}
      .div-b{background:#ccc;boder:1px solid blue;}
    </style>
    </head>
    <body>
    <div class="div1">
        <div class="div-a"></div>
        <div class="div-b">
        div-b的内容
          <ul>
            <li>第一个ul下的li</li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
        </div>
    </div>
    </body>
    </html>
    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2016-11-16
    有点前后矛盾啊，ul究竟有没有设置浮动啊？li有没有浮动？追问

    ul没有浮动 li设置了浮动

    我加一下你，给你发代码你帮我看看

    追答

    那就对了。你在li的后面清除一下浮动，比如加一个 ，那再看看div1、B、ul的高度是不是0

    追问

    我试试

    还是不可以

    追答

    <div class=div1>

        <div class=B>

            <ul>

                <li>....</li>

                <br style="clear:both"/>

           </ul>

       </div>

    </div>

    追问

    这样啊

    好的 谢谢

    强

    果然是这个问题

    现在好了

    这个clear:both就只能写在标签里吗，还能怎么用

    追答

    可以用在任何的块级元素内啊，比如

    补充说一下：
    元素浮动后，它在父元素中占用的位置就会被去掉，这时候如果父元素中没有其他内容，而且父元素的height设为auto，那么父元素的height自然就是0咯。只要在浮动元素的后面清除浮动，就是告诉父元素从这里开始就不是浮动内容了，这样父元素就会把浮动元素原来（即在没有浮动的情况下）所占用的位置还回来，然后后面假如还有内容就会从这个位置开始继续显示，这样的话父元素的高度就会自然被撑开了，height也就不是0了

    本回答被提问者采纳
    相似回答
    Web前端开发--HTML5+CSS3 分享给大家参考答：简单并概括来说，CSS3是对HTML5内容进行布局（即安排每一块内容的位置）、添加外观样式。但是其过程并不是如说的这样简单。CSS3涵盖了大量的技术，需要我们看大量的实例并操作才能掌握。对于之后找工作来说，DIV+CSS网页布局是最最基础的一项。这里我给出我看过感觉不错的书籍：《图解CSS3核心技术与案...
    div详细用法,举例说明答：<div>普通内容一</div> <div class="divcss5-1">我字体大小为16px</div> <div class="divcss5-2">我字体颜色为红色</div> <div class="divcss5-3">我背景为黑色字体为白色</div> <div class="divcss5-4">布局设置边框和高度</div> </body> </html> ...
    前端代码div+css是什么意思答：前端代码div+css，就是现在一种网页设计的一种实现方式，通过div+css，可以现在对一些杂乱无章的图片和文字，进行排版和使用，从而实现了人们通常看到的漂亮的网页，具体看下代码：<head> <link rel="stylesheet" type="text/css" href="CSS-kuaidu.css"/> <title>宽度的学习</title> </head> <...
    总结几种常见的div+css布局实例答：我称之为“果冻依赖型元素”，又称之为“inline-block依赖型元素”，也就是说,只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。3. DIV+CSS布局中自适应高度的解决方法要从固定的、基于像素的设计方法转到弹性的、相对的...
    前端代码div+css是什么意思?答：在前端代码中，通常使用div+css来布局用户页面。通过这种组合方式，可以将网页的内容与样式分离，提高了前端开发的速度。下面就来使用div+css来实现两种导航栏的编写吧！1.导航栏一：<div id='menu'> <a href="#">链接</a>| <a href="#">链接</a>| <a href="#">链接</a>| <a href=...
    简述CSS+DIV布局的常用方法。答：【答案】：CSS+DIV布局的常用方法有三种：一、 常规流式布局 元素按照自身的常规显示方式显示，有两个特点：1.元素按照自身HTML元素定义的位置显示（怎么写的怎么显示）2.元素按照自身的常规显示特性显示，比如块级元素垂直排列，行级元素水平排列。二、 浮动 具体代码：左浮动 float:left；右浮动 float:...
    cssdiv布局技巧?答：css的基础布局方法 1.块区域介绍 <body> <div> <p>这是一个段落.</p> </div> </body> p元素的包含块是div元素，因为作为块级元素，表单元格或行内元素，这是最近的祖先元素，类似的，div的包含块是body.因此，p的布局依赖于div的布局，而div的布局则依赖于body的布局。块级元素会自动重启...
    css+div中div是什么啊,怎么用啊答：HTML<div>标签 1、定义和用法 <div>可定义文档中的分区或节（division/section）。<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用id或class来标记<div>，那么该标签的作用会变得更加有效。?2、用法 <div>是一个块级元素。这意味着它...
    html div标签什么意思答：在html中，div的意思为“分区”，是一个区隔标签，用于定义文档中的分区，可以把文档分割为独立的、不同的部分。div元素是用来为HTML文档内大块的内容提供结构和背景的元素；DIV起始和结束标签之间的所有内容都是用来构成这个块的。<div>标签定义HTML文档中的分隔（DIVision）或部分（section）。div属于web...
    大家正在搜
    并详细说明详细情况说明做了详细说明详细说明什么意思我当前的详细地址详细地向我介绍地对吗我的详细教程我这里的详细地址我要详细地址
    相关问题
    HTML,css,div,前端看我详细描述
    前端div+css怎么放到手机里面查看效果
    div、css是不是最简单的前端？
    关于HTML css+DIV布局问题
    只会html,div+css和js,能找到好工作吗?
    只会html和div+css能找到工作吗
    前端代码div+css是什么意思
    我学习了HTML DIV+CSS 怎么样熟悉它们了？是看别人...