如何自动化三个div的宽度以适应容器？

我有一个宽度为100％的单个div。当浏览器调整大小时，div的大小保持为浏览器宽度的100％。里面的div是另外三个宽度为200px的div。当浏览器拉伸到600px宽，那么所有的div并排很好，就像我想要的一样。但是，如果您将浏览器拉伸至599像素或更少，则一个或两个div会被撞倒并出现在其他div不太理想的位置。如何自动化三个div的宽度以适应容器？

所以我想要的是divs始终保持并排，同样改变宽度。因此，如果我将浏览器宽度更改为例如150px，那么所有并排的三个div的宽度均为50px。

这可能只使用CSS和HTML代码吗？我不认为我需要提供我的代码，因为它只是一个div内的三个div。

来源

2017-10-04 Steven

预计你至少尝试为自己的代码这一点。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），无论是通过谷歌或通过搜索，尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您所尝试的内容。 –

您可以将这些设置应用于您的三个DIV。

.my_div { 
    width: 33%; 
    max-width: 200px; 
}

这将确保三倍的DIV总是放入容器中（33％的宽度），但绝不会获得比各为200px宽，如果还容器大于600像素宽得多。

来源

2017-10-04 15:40:13 Johannes

您可以用Flexbox的做到这一点：

* {margin:0;padding:0;box-sizing:border-box} 
 

 
.parent { 
 
    display: flex; /* displays children inline */ 
 
} 
 

 
.child { 
 
    flex: 0 1 200px; 
 
    text-align: center; 
 
} 
 

 
.red {background: #f00} 
 
.green {background: #0f0} 
 
.blue {background: #00f}

<div class="parent"> 
 
    <div class="child red">Red</div> 
 
    <div class="child green">Green</div> 
 
    <div class="child blue">Blue</div> 
 
</div>

来源

2017-10-04 15:42:33 VXp

.parent { 
 
    display: block; 
 
} 
 
.child{ 
 
    width: 32.5%; 
 
    border:1px solid red; 
 
    float:left; 
 
}

<div class="parent"> 
 
    <div class="child">One</div> 
 
    <div class="child">Two</div> 
 
    <div class="child">Three</div> 
 
</div>

来源

2017-10-04 15:45:32 Amit

如何自动化三个div的宽度以适应容器？

回答

相关问题