代码之家  ›  专栏  ›  技术社区  ›  Sunil

内部div不占用外部div的整个滚动宽度

  •  2
  • Sunil  · 技术社区  · 6 年前

    我有一个使用html和CSS的示例,链接如下: https://js.do/sun21170/inner-width-not-taking-whole-of-outer-width

    问题 :除了将inner div的宽度设置为150%左右之外,是否有一些CSS可以用来使inner div样式应用于outer div的整个滚动宽度?

    我使用的示例代码如下。

    <div class="outerDiv">
        <div class="innerDiv">
          This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div  
        </div>
    </div>
    
    <style>
    .outerDiv {
       max-width:500px;
       border:2px solid purple;
       overflow:auto;
       height: 100px;
    }
    .innerDiv {
       border:1px dashed red;
       background-color: lightgreen;
       white-space:nowrap;
       width:100%;
    }
    </style>
    
    2 回复  |  直到 6 年前
        1
  •  5
  •   andreas    6 年前

    是的,只需设置 .innerDiv display: inline-block; . 往这边走 .innerDiv公司 行为类似于内联元素,如果不指定 width .

    以下是工作示例:

    .outerDiv {
       max-width:500px;
       border:2px solid purple;
       overflow:auto;
       height: 100px;
    }
    .innerDiv {
       display: inline-block; /* ← this does the trick */
       border:1px dashed red;
       background-color: lightgreen;
       white-space:nowrap;
       /* width: 100%; ← this has to be removed */
    }
    <div class="outerDiv">
        <div class="innerDiv">
          This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div  
        </div>
    </div>
        2
  •  1
  •   Elharony    6 年前

    好吧,你可以按照上面@andreas的建议去做:~~

    • display: inline-block .innerDiv
    • width: 100%

    或者。。。如果要避免溢出效应,可以删除 white-space: nowrap 从你的 同学们!

    一个问题; 当你有2个 .innerDiv公司 你想让它们叠在一起吗?如果是这样的话,你希望他们两个都有一个拉伸的背景,以结束 .outerDiv ?

    一开始我对你的问题还不够清楚,但现在我明白了你真正需要达到的目标,这里有两个解决方案:

    #1解决方案: table-row

    .outerDiv {
       max-width:500px;
       border:2px solid purple;
       overflow:auto;
       height: 100px;
    }
    .innerDiv {
       display: table-row; /* <-- Add this */
       border:1px dashed red;
       background-color: lightgreen;
       white-space:nowrap;
    }
    <div class="outerDiv">
        <div class="innerDiv">
          This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div  
        </div>
         <div class="innerDiv">
          This is inner div This is inner div This is inner div   
        </div>
    </div>

    #2解决方案: Relative & Absolute 位置!

    注: 这可以不用 position: relative position: absolute ,只需使用 显示:内联块 .wrapperDiv 一切都一样!

    .outerDiv {
       position: relative; /* <-- Add this */
       max-width:500px;
       border:2px solid purple;
       overflow:auto;
       height: 100px;
    }
    .wrapperDiv { 
       position: absolute; /* <-- Add this */
    }
    .innerDiv {
       border:1px dashed red;
       background-color: lightgreen;
       white-space:nowrap;
    }
    <div class="outerDiv">
       <div class="wrapperDiv"> <!-- Add This -->
        <div class="innerDiv">
          This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div  
        </div>
         <div class="innerDiv">
          This is inner div This is inner div This is inner div   
        </div>
       </div>
    </div>

    希望这对你有帮助!

        3
  •  0
  •   govizlora    4 年前

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    

    工作示例:

    .outerDiv {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      max-width: 500px;
      overflow: auto;
    }
    
    .innerDiv {
      background-color: lightgreen;
      white-space: nowrap;
    }
    
    .innerDiv2 {
      background-color: lightpink;
      white-space: nowrap;
    }
    <div class="outerDiv">
      <div class="innerDiv">
        This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div
      </div>
      <div class="innerDiv2">
        This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div
      </div>
    </div>
    推荐文章