div元素在固定宽度div内的动态宽度 [英] Dynamic width of div elements inside a fixed width div

问题描述

我正在处理一个固定宽度的父div，用于多个页面。这个div里面有很多（3-5）个子div元素。对于不同的页面，子div元素的数量不同，即对于页面1，父div具有3个子div，对于页面2，父div具有5个子div等。

如何设置这些子元素的宽度，以便它们在每个页面中完全占据父div的宽度？

PS约束是不使用SASS / Less和Bootstrap。

解决方案

基本上你要求一个表，应该与父节点的固定宽度成比例。

如果你知道最大可能的孩子数量，那么在CSS中是可能的（如果不是你将总是使用所有的空间，但每个单元格的宽度将根据内容）

当你知道孩子的最大数量时，你将该属性添加到类 .height ： max-width：Npx 其中 N 是 width parent除以子项数

  .container {border：1px solid＃000; border-radius：5px; width：500px; display：table;}。child {display：table-cell; border-right：1px solid＃000;}。child：last-of-type {border：none;} height {min-height：100px;}  

 < div class =container height> < div class =child height>儿童1< / div> < div class =child height>儿童2< / div> < div class =child height>儿童3< / div> < div class =child height>孩子4< / div> < div class =child height>儿童5< / div>< / div>  

$ b

I am dealing with a fixed width parent div that is being used in multiple pages. This div has many(3-5) child div elements inside it. For different pages, the number of child div elements vary, i.e. for page 1, the parent div has 3 child divs, for page 2, the parent div has 5 child divs etc.

How can I set the width of these child elements so that they fully occupy the width of parent div in every page?

P.S. The constraint is to not use SASS/Less and Bootstrap.

解决方案

Basically you are asking for a table where the width of every cell should be the same in proportion of the fixed width of the parent.

It is possible in CSS if you know the maximum possible number of children (if not you will always use all the space but the width of each cell will change based on the content)

When you know the maximum number if children, you add that property to the class .height: max-width:Npx where N is the width of the parent divided by the number of children

.container {
    border:1px solid #000;
    border-radius:5px;
    width:500px;
    display:table;
}
.child{
    display:table-cell;
    border-right:1px solid #000;
}

.child:last-of-type {
    border:none;
}
.height{
    min-height:100px;
}

<div class="container height">
    <div class="child height">Child 1</div>
    <div class="child height">Child 2</div>
    <div class="child height">Child 3</div>
    <div class="child height">Child 4</div>
    <div class="child height">Child 5</div>
</div>

这篇关于div元素在固定宽度div内的动态宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！