我怎样才能使父 div(红色)可拉伸(stretch),以便其中的最小子元素数可以是 1,最大数目可以是 3,之后第四个 div 会自动垂直向下设置。
我的内部div的CSS是
.inner_div {
min-height: 238px;
border-bottom: 1px dashed #e7e7e7;
border-right: 1px dashed #e7e7e7;
border-top: 1px dashed #e7e7e7;
border-left: 1px dashed #e7e7e7;
padding-top: 10px;
padding-bottom: 10px;
float: left;
padding: 9px;
width: 200px;
background-color: white;
}
父级(外部 div)的 css 是
.outer_div {
padding: 0 20px;
margin-top: 55px!important;
margin-bottom: 33px!important;
background: white;
border-left: 1px dashed #e7e7e7;
overflow: hidden;
max-width: 611px;
min-width: 223px;
width: auto;
}
最佳答案
让我们喝点水吧!
这里有很多答案!
以下示例适用于所有屏幕尺寸/宽度,最多 3 个框。
@media
用于在每个视口(viewport)宽度上设置和取消边框,一列到三列。它还会为每个步骤重新调整外部 div 的大小,并根据需要更改背景颜色等。有关正在发生的事情的基本解释,请参阅代码段中的评论。
此示例可以根据需要使用任意数量的框。将其全屏打开并调整大小以查看结果。
更新 - 我给内部设置了深绿色背景,外部是 display: inline-block
以根据其内容调整大小。
* {
box-sizing: border-box;
/* incorporate padding into width (.outer_div padding is excluded) */
}
.outer_div {
margin: 50px;
display: inline-block;
max-width: 640px;
min-width: 240px;
/* 200 * 3 across + 40 .outer_div padding = 640 */
padding: 20px;
/* transition? yes! on re-size! */
transition: background 1s;
transition: max-width 0.05s;
}
.inner_div {
min-height: 238px;
/* BORDER ALL THE THINGS!!!*/
border: 1px dashed #000;
float: left;
padding: 9px;
/* padding is accounted for in the width thanks to border-box */
width: 200px;
background: #0a8f08;
}
/* Clear the floats at the very end */
.outer_div:after {
content: ' ';
display: block;
clear: left;
}
/* 3 boxes across */
/*@media sizes increase and decrease dependant on inner box width and outer_div padding */
@media screen and (min-width: 756px) {
.outer_div {
background: #a3e9a4;
}
/* Remove all bottom borders */
.inner_div {
border-bottom: none
}
/* Remove every middle border */
.inner_div:nth-child(3n+2) {
border-right: none;
border-left: none;
}
/* Last child gets a right border */
.inner_div:last-child {
border-right: 1px dashed #000;
}
/* last three get a bottom border */
.inner_div:nth-last-child(-n+3) {
border-bottom: 1px dashed #000;
}
}
/* 2 boxes across */
@media screen and (min-width: 573px) and (max-width: 755px) {
.outer_div {
max-width: 440px;
background: #dcedc8;
}
/* Remove all bottom borders */
.inner_div {
border-bottom: none;
}
/* Remove every second border */
.inner_div:nth-child(2n) {
border-left: none;
}
/* last two get a bottom border */
.inner_div:nth-last-child(-n+2) {
border-bottom: 1px dashed #000;
}
}
/* 1 box across */
@media screen and (max-width: 572px) {
.outer_div {
max-width: 240px;
background: #f0f4c3;
}
/* Remove all bottom borders */
.inner_div {
border-bottom: none;
}
/* last one gets a border */
.inner_div:last-child {
border-bottom: 1px dashed #000;
}
}
<div class="outer_div">
<div class="inner_div"></div>
<div class="inner_div"></div>
<div class="inner_div"></div>
<div class="inner_div"></div>
<div class="inner_div"></div>
<div class="inner_div"></div>
</div>
关于html - 如何相对于其中的div制作一个可拉伸(stretch)的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26403193/