zoukankan      html  css  js  c++  java
  • 子级宽度没有自适应内容宽度撑开,只适应到父级100%

     1  #box{
     2          600px;
     3       }
     4       .inner-box{
     5         display: flex;
     6          100%;
     7         height: auto;
     8         background-color: #eee;
     9         overflow: auto;
    10       }
    11       p{
    12         
    13          auto;
    14         font-size: 16px;
    15         background-color: aqua;
    16         white-space: nowrap;
    17       }
    18 <div id="box">
    19       <div class="inner-box">
    20         <p>
    21           父级设置宽度100%时,超出的部分有滚动条滚动时出现;
    22           子级宽度自适应,由内容撑开;
    23           问题:
    24           1、子级宽度没有自适应内容宽度撑开,只适应到父级100%25           原因:
    26           1、子级不设置宽度或者宽度自适应撑开且设置不换行的情况下,子级宽度只会撑开到父级的100%宽度,即上图p标签只会撑开至600px而不是text的撑开宽度
    27           解决:
    28           1、使子级p标签脱离文档流,设置absolute;
    29           2、设置父级节点innerbox,dispaly:flex;dispaly:grid;
    30         </p>
    31       </div>
    32     </div>
  • 相关阅读:
    大数据的起步:初学者
    接触区块链
    学习开始了,博客开始了
    hadoop分布式的搭建过程
    Java笔试题
    JavaSCript全局变量与局部变量
    OSGI
    restful
    jersey
    JSP+Servlet+Mybits小例子
  • 原文地址:https://www.cnblogs.com/ypppt/p/12883248.html
Copyright © 2011-2022 走看看