响应不是取决于屏幕宽度而是取决于父 div 宽度? [英] Responsive depending not on screen width but on parent div width?

查看：48
本文介绍了响应不是取决于屏幕宽度而是取决于父 div 宽度?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当父 div 太小而无法在同一行上显示它们时，我希望下面的块堆叠在一起.

我尝试使用 @media 规则和 max-width 但它只考虑浏览器的宽度，而不考虑父 div 的宽度.

我尝试过使用宽度而不是最大宽度，但没有帮助.

.menuTwoColumns {显示:表；}.menuTwoColumns >div {宽度:50%；显示:表格单元格；垂直对齐:中间；padding-right: 20px;}/* 这仅对浏览器宽度有帮助，而不对父 div 宽度有帮助 */@media 屏幕和(最大宽度:479px){.menuTwoColumns {显示:块；}.menuTwoColumns >div {显示:内联块；}}

<头><风格></风格><身体><div style="background-color:grey; width: 500px; resize: horizo​​ntal; overflow: auto;"><div class="menuTwoColumns"><div><p>您可以调整大小</p>

<div><p>你的鼠标和更多的文本和更多的文本和更多的文本和更多的文本和更多的文本和更多的文本和更多的文本和更多的文本和更多的文本和更多的文本和更多的文本和更多的文本和更多的文本 <p>父 div 和更多的文本和更多的文本和更多的文本</p>

</html>

解决方案

使用 flexbox 做不同的事情

.menuTwoColumns {显示:弹性；弹性包裹:包裹；}.menuTwoColumns >div {flex:calc(479px/2);显示:弹性；对齐项目:居中；}

<div style="background-color:grey; width: 500px; resize: horizo​​ntal; overflow: auto;"><div class="menuTwoColumns"><div><p>您可以调整大小</p>

<div><p>使用鼠标的父 div 使用鼠标的父 div 和更多的文字和更多的文字和更多的文字和更多的文字和更多的文字和更多的文字和更多的文字和更多的文字和更多的文字和更多的文字和更多的文字和更多的文字和更多的文字和更多的文字和更多的文字和更多的文字和更多的文字更多的文字和更多的文字</p>

I would like the blocks below to pile on top of each other when the parent div is too small to display them on the same line.

I have tried using a @media rule with max-width but it only takes into account the width of the browser, not of the parent div.

I have tried with width instead of max-width but it did not help.

.menuTwoColumns {
  display: table;
}

.menuTwoColumns > div {
  width: 50%;
  display: table-cell;
  vertical-align: middle;
  padding-right: 20px;
}

/* this only help for the browser width not the parent div width */
@media screen and (max-width: 479px) {
    .menuTwoColumns {
        display: block;
    }
    .menuTwoColumns > div {
        display:inline-block;
    }
}

<html>
    <head>
<style>

</style>
    </head>
    <body>
        <div style="background-color:grey;  width: 500px;  resize: horizontal;  overflow: auto;">
            <div class="menuTwoColumns">
                <div>
                    <p>You can resize</p>
                </div>
                <div>
                    <p>the parent div with your mouse and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text</p>
                </div>
            </div>
        </div>
    </body>
</html>

解决方案

Do it differently using flexbox

.menuTwoColumns {
  display: flex;
  flex-wrap:wrap;
}

.menuTwoColumns > div {
  flex:calc(479px / 2);
  display:flex;
  align-items:center;
}

<div style="background-color:grey;  width: 500px;  resize: horizontal;  overflow: auto;">
  <div class="menuTwoColumns">
    <div>
      <p>You can resize</p>
    </div>
    <div>
      <p>the parent div with your mouse the parent div with your mouse and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text</p>
    </div>
  </div>
</div>

这篇关于响应不是取决于屏幕宽度而是取决于父 div 宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆