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>

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

4 个答案: