html - 如何在没有@media 查询的情况下创建响应式 div 宽度

Question

我有 3 个 div 元素嵌套在另一个中：

<div id="master" style="width:100%">

<div id="child1">Content1</div>
<div id="child2">Content2</div>
<div id="child3">Content3</div>

</div>

现在#master是一个响应式 div，其像素宽度会随窗口大小而变化。我希望每个子 div 都width:33.333%提供内容不换行。如果内容确实换行，我希望宽度为100%.

注意内容是可变的，所以我不能使用传统的媒体查询。谁能想到我怎么能开始解决这个问题？

Answer 1

首先，
尝试将 CSS 应用到每个 div，

#master{
    width:100%;
    }
#child1, #child2, #child3{
    width:33.33%;
    display: inline-block;
}

除此之外，您可以使用 JavaScript 来满足您的要求，在</body>您需要在下面包含此 javascript 之前什么都没有：

var child1 = document.querySelector('#child1');
var child2 = document.querySelector('#child2');
var child3 = document.querySelector('#child3');

if((child1.offsetHeight < child1.scrollHeight) || (child1.offsetWidth < child1.scrollWidth)&&(child2.offsetHeight < child2.scrollHeight) || (child2.offsetWidth < child2.scrollWidth)&&(child3.offsetHeight < child3.scrollHeight) || (child3.offsetWidth < child3.scrollWidth)){
    // your element have overflow
    child1.style.width = "100%";
    child2.style.width = "100%";
    child3.style.width = "100%";
}
else{
    //your element don't have overflow
}

Answer 2

只需使用这个 CSS

#master{
    width:100%;
}
#child1, #child2, #child3{
    width:33%;
    display:inline-block;
}

你也可以使用

    #child1, #child2, #child3{
   width:33.33%;
   float:left;
    }

Answer 3

尝试使用min-width属性。

当块超过它min-width时，它将被放入第二行。

#child1, #child2, #child3{
    width:33%;
    min-width: 200px;
    display:inline-block;
}

希望这会有所帮助。

Answer 4

flex您可以使用所有最新浏览器都支持的 css 属性来创建响应式布局。

body {
  background-color: wheat;
}

#master {
  display: flex;
  flex-wrap: wrap;
}

#child1,#child2,#child3 {
  height: 80px;
  padding: 25px;
  background-color: brown;
  border: 1px solid #ccc;
  flex: 1 1 160px;
  flex-basis: 20%;
}

 <div id="master">

<div id="child1">Content1</div>
<div id="child2">Content2</div>
<div id="child3">Content3</div>

</div>