使子div扩展以填充父div的宽度 [英] Make child divs expand to fill parent div's width

问题描述

所以我在一个div内有三个div。

 < div class = parent> 
< div class = child>文本< / div> 
< div class = child> Text< / div> 
< div class = child>文本< / div> 
< / div> 
  

我希望孩子div填充

p>

我如何实现自己想要的目标？

CSS-

  .child {
背景：白色； 
颜色：＃a7a9ac； 
光标：指针； 
字号：15px； 
 border-right：1px; 
 border-top：0; 
 border-bottom：0; 
 border-left：0; 
 border-style：solid; 
 border-color：@ faded-grey； 
 padding-right：10px； 
 margin：0自动； 
高度：100％； 
} 
 
 .parent {
 border-top：1px; 
 border-left：0; 
 border-bot汤姆：1; 
 border-style：实心； 
 border-color：@ faded-grey; 
 border-right：0; 
宽度：100％； 
 margin-right：0px; 
高度：80像素； 
 
} 
  

解决方案

如果知道永远会有三个孩子，您可以简单地使用：

  .parent> .child {
 float：left; 
宽度：33％； 
} 
 
 .parent {
overflow：auto; / *或您想使用的任何浮动包装技术* / 
} 
  

如果您这样做不知道有多少个孩子，您将需要使用CSS表，flexbox，或者可能将内联块与text-align组合起来：对齐。

So I have three divs inside one div.

<div class="parent">
<div class="child> Text</div>
<div class="child">Text</div>
<div class="child">Text</div>
</div>

I want the child divs to fill up the width of the parent(the combined width of the children should be the parent). However, this is not happening, I'm falling short. I think this is because the child divs are setting width based on their content.

How do I achieve what I want?

CSS-

.child {
    background: white;
    color: #a7a9ac;
    cursor: pointer;
    font-size: 15px;
    border-right: 1px;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-style: solid;
    border-color: @faded-grey;
    padding-right: 10px;
    margin: 0 auto;
    height: 100%;
}

.parent {
    border-top: 1px;
    border-left: 0;
    border-bottom: 1;
    border-style: solid;
    border-color: @faded-grey;
    border-right: 0;
    width: 100%;
    margin-right: 0px;
    height: 80px;

}

解决方案

If you know there will always be three children, you can simply use:

.parent > .child {
    float: left;
    width: 33%;
}

.parent {
    overflow: auto; /*or whatever float wrapping technique you want to use*/
}

If you do not know how many children there are, you will need to use CSS tables, flexbox, or perhaps combine inline-blocks with text-align: justify.

这篇关于使子div扩展以填充父div的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！