Question

如果我有这样的东西

<div class="A">
    <div class="B"></div>
    <div class="C"></div>
</div>

CSS

.B, .C {
    display:inline-block;
}

对于B和C，宽度包裹它的内容并且不完全填充A的宽度。但是如果我将其宽度设置为100％，则每个宽度等于A的宽度，然后将A的宽度扩展为原始尺寸的两倍。

如何更改它，使B的宽度+ C的宽度= A的原始宽度。

基本上增加B和C的宽度，使其填充A的宽度，但保持它们内联。

有人知道吗？

谢谢

Answer 1

最好的用例是使用email: { type: String, required: [true, "Email is required"], unique: true } for validation with "unique" i am create schema.path('email').validate(function(v){ mongoose.models['User'].findOne({email: this.email}, function(err, user){ if(err){ throw err; }else{ if(user){ this.invalidate("email", "Email exists!"); } } }); }, null);，因为你说它们是动态的：

Flexbox

.A {border: 1px solid #99f;}
.A div {border: 1px solid #999; height: 10px;}

/* Flex Box */
.A {display: flex;}
.A div {flex: auto;}

Answer 2

请注意，这并不像Praveen Kumar的答案那么优雅，但我想我会发布一个基于表格的答案：

＆＃13;

.A {
    display: table;
    height: 50px;
    width: 100%;
    border: 2px solid #000;
}
.A > div {
    display: table-cell;
    border: 1px solid #fff;
    background-color: red;
}

＆＃13;

Example 1:

<div class="A">
    <div class="B"></div>
    <div class="C"></div>
</div>

Example 2: 

<div class="A">
    <div class="B"></div>
    <div class="C"></div>
    <div class="D"></div>
</div>

Example 3: 

<div class="A">
    <div class="B"></div>
    <div class="C"></div>
    <div class="D"></div>
    <div class="E"></div>
    <div class="F"></div>
    <div class="G"></div>
</div>

Example 4:

<div class="A">
    <div class="B"></div>
    <div class="C"></div>
    <div class="D"></div>
    <div class="E"></div>
    <div class="F"></div>
    <div class="G"></div>
    <div class="B"></div>
    <div class="C"></div>
    <div class="D"></div>
    <div class="E"></div>
    <div class="F"></div>
    <div class="G"></div>
</div>

Example 5:

<div class="A">
    <div class="B"></div>
    <div class="C"></div>
    <div class="D"></div>
    <div class="E"></div>
    <div class="F"></div>
    <div class="G"></div>
    <div class="B"></div>
    <div class="C"></div>
    <div class="D"></div>
    <div class="E"></div>
    <div class="F"></div>
    <div class="G"></div>
    <div class="B"></div>
    <div class="C"></div>
    <div class="D"></div>
    <div class="E"></div>
    <div class="F"></div>
    <div class="G"></div>
    <div class="B"></div>
    <div class="C"></div>
    <div class="D"></div>
    <div class="E"></div>
    <div class="F"></div>
    <div class="G"></div>
</div>

＆＃13;

同样，孩子的数量是无关紧要的。你可以拥有你需要的任意数量。

如何扩展所有内联块div以填充父级？

2 个答案: