html – 如何根据div内部制作一个可伸缩的div
发布时间:2020-12-14 19:42:08 所属栏目:资源 来源:网络整理
导读:如何使父div(红色)可伸缩,以便其中的最小数量的孩子可以是1,最大数量可以是3,之后第四个div自动垂直向下设置. 我的内部div的css是 .inner_div {min-height: 238px;border-bottom: 1px dashed #e7e7e7;border-right: 1px dashed #e7e7e7;border-top: 1px dash
如何使父div(红色)可伸缩,以便其中的最小数量的孩子可以是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用于在每个视口宽度处给出边框,一列最多三列.它还会为每个步骤重新调整外部div的大小,并根据需要更改背景颜色等.请参阅代码段中的注释,以获取有关正在进行的操作的基本说明. 此示例可以根据需要使用任意数量的盒子.全屏打开并调整大小以查看结果. 更新 – 我给了内部一个深绿色背景,外部显示:内联块以调整其内容的大小. * { 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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |