CSS：我看不到弹性内部的div

发布于 2025-02-03 15:57:55 字数 1949 浏览 1 评论 0原文

我无法在Flex Div中看到细节。我想在该部门内显示纽约。但是由于Flex，它没有显示出来。

http://jsfiddle.net.net/1jxb0mp7/4/

    .parent {
        display: flex;
        font-size: 0;
        flex-wrap:wrap;
        margin:-10px 0 0 -10px;
    }
    .child {
        color: red;
        display: inline-block;
        background: blue;
        margin: 10px 0 0 10px;
        height: 100px;    
        width: calc(100% * (1/4) - 10px - 1px)
    }
    .childDetails{
      height:50px!important
    }

<body>
    sadasdsad
        <div class="parent-wrapper">
            <div class="parent">
                <div class="child">
                  <div class="childDetails">Newyork</div>
                </div>
                <div class="child">
                  <div class="childDetails">Newyork</div>
                </div>
                <div class="child">
                  <div  class="childDetails">Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
            </div>
        </div>
    </body>

原文

I am not able to see details inside the flex div. I want to display Newyork inside that div. But due to flex, it is not getting displayed.

http://jsfiddle.net/1jxb0mp7/4/

    .parent {
        display: flex;
        font-size: 0;
        flex-wrap:wrap;
        margin:-10px 0 0 -10px;
    }
    .child {
        color: red;
        display: inline-block;
        background: blue;
        margin: 10px 0 0 10px;
        height: 100px;    
        width: calc(100% * (1/4) - 10px - 1px)
    }
    .childDetails{
      height:50px!important
    }

<body>
    sadasdsad
        <div class="parent-wrapper">
            <div class="parent">
                <div class="child">
                  <div class="childDetails">Newyork</div>
                </div>
                <div class="child">
                  <div class="childDetails">Newyork</div>
                </div>
                <div class="child">
                  <div  class="childDetails">Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
            </div>
        </div>
    </body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

对岸观火 2025-02-10 15:57:55

该问题来自font-size：0px;在您的父类中。分配字体大小＆gt; 0px，您将看到Newyork。 字体大小：20px;

回复收藏 0 原文

汐鸠 2025-02-10 15:57:55

设置z索引和字体大小

.childDetails{
  height:50px!important;
  color:red;
  font-size:20px;
  z-index:999;
}

Set z-index and font-size

.childDetails{
  height:50px!important;
  color:red;
  font-size:20px;
  z-index:999;
}

回复收藏 0 原文

凹づ凸ル 2025-02-10 15:57:55

我刚刚添加了一些字体大小，似乎是在工作，并且更多的CSS要求DIV没有课。

.parent {
        display: flex;
        font-size: 0;
        flex-wrap:wrap;
        margin:-10px 0 0 -10px;
    }
    .child {      
        display: inline-block;
        background: blue;
        margin: 10px 0 0 10px;
        height: 100px;    
        width: calc(100% * (1/4) - 10px - 1px)
    }
    .childDetails, .child >div{
      height:50px!important;
      color: red;
      font-size: 22px;
    }

<body>
    sadasdsad
        <div class="parent-wrapper">
            <div class="parent">
                <div class="child">
                  <div class="childDetails">Newyork</div>
                </div>
                <div class="child">
                  <div class="childDetails">Newyork</div>
                </div>
                <div class="child">
                  <div  class="childDetails">Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
            </div>
        </div>
    </body>

I just added some font-size seems like its working and ad more css call for the div that doesnt have a class.

.parent {
        display: flex;
        font-size: 0;
        flex-wrap:wrap;
        margin:-10px 0 0 -10px;
    }
    .child {      
        display: inline-block;
        background: blue;
        margin: 10px 0 0 10px;
        height: 100px;    
        width: calc(100% * (1/4) - 10px - 1px)
    }
    .childDetails, .child >div{
      height:50px!important;
      color: red;
      font-size: 22px;
    }

<body>
    sadasdsad
        <div class="parent-wrapper">
            <div class="parent">
                <div class="child">
                  <div class="childDetails">Newyork</div>
                </div>
                <div class="child">
                  <div class="childDetails">Newyork</div>
                </div>
                <div class="child">
                  <div  class="childDetails">Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
                <div class="child">
                  <div>Newyork</div>
                </div>
            </div>
        </div>
    </body>

回复收藏 0 原文

~没有更多了~