灵活的宽度div旁边的固定宽度div

今天我面临一个具有挑战性的情况（至少对我而言）。灵活的宽度div旁边的固定宽度div

其实我必须让一些div灵活在一个父div里面，并有另一个固定div作为'brother'。根据父母的宽度，这些灵活的div必须是100％。

在这里你去做出了解释我的情况的图片：

print-squeme

我的想法是这样的：

.parent { 
 
    width: 500px; /* this value can change any time */ 
 
    padding: 10px; 
 
    border: 1px solid red; 
 
    float: left; 
 
} 
 

 
.parent div { 
 
    float: left; 
 
    border: 1px solid #ccc; 
 
} 
 

 
.fixed { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #ccc; 
 
    
 
} 
 

 
.flexible { 
 
    width: calc(100% - 100px); /* IT IS NOT WORKING AS I WOULD LIKE */ 
 
}

<div class='parent'> 
 
    <div class='fixed'>*fixed</div> 
 
    <div class='flexible'>*flexible 1</div> 
 
    <div class='flexible'>*flexible 2</div> 
 
</div>

有人能帮助我吗？

感谢

来源

2017-06-21 Mineiro-DF

您可以为此使用flexbox。你应该将你的两个灵活的div包装在一个容器中，以便它们堆叠起来。然后您可以将父项设置为display: flex; flex-direction: row;。然后将柔性包装纸设置为display: flex; flex-direction: column;，并将柔性包装纸和柔性包装纸上的flex-grow: 1设置为使其展开以填充垂直和水平空间。

.parent { 
 
    width: 500px; 
 
    padding: 10px; 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.parent div { 
 
    border: 1px solid #ccc; 
 
} 
 

 
.flexcontainer { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-grow: 1; 
 
} 
 

 
.fixed { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #ccc; 
 
} 
 

 
.flexible { 
 
    flex-grow: 1; 
 
}

<div class='parent'> 
 
    <div class='fixed'>*fixed</div> 
 
    <div class="flexcontainer"> 
 
    <div class='flexible'>*flexible 1</div> 
 
    <div class='flexible'>*flexible 2</div> 
 
    </div> 
 
</div>

来源

2017-06-21 19:04:36 sorayadragon

这是最好的答案。非常感谢你！ –

嗨，伙计，现在我看到它无法正常使用Safari。你知道为什么吗？ –

我的猜测是支持。Safari上列出了一些已知问题：https://caniuse.com/#feat=flexbox – sorayadragon

以你的代码为基础，您可以添加left和margin-left到.flexible。还需要更改width，以便计算填充和容器。

.flexible { 
    left: 0; 
    margin-left: 10px; 
    width: calc(100% - 120px); /* IT IS NOT WORKING AS I WOULD LIKE */ 
}

来源

2017-06-21 18:57:11

您可以使用flexbox来实现此布局。

.parent { 
 
    display: inline-flex;  /* 1 */ 
 
    padding: 10px; 
 
    border: 1px solid red; 
 
} 
 

 
.sub-container {   /* 2 */ 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: stretch;  /* 3 */ 
 
} 
 

 
.flexible { 
 
    flex: 1;     /* 4 */ 
 
    border: 1px solid black; 
 
} 
 

 
.sub-container > div + div { 
 
    margin-top: 5px; 
 
} 
 

 
.fixed { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #ccc; 
 
}

<div class='parent'> 
 
    <div class='fixed'>*fixed</div> 
 
    <div class='sub-container'> 
 
    <div class='flexible'>*flexible 1</div> 
 
    <div class='flexible'>*flexible 2 *flexible 2 *flexible 2</div> 
 
    </div> 
 
</div>

注：

行内柔性容器。（它会根据其内容的宽度进行调整。）
为灵活的div创建子容器。也使用flex属性。
柔性容器的初始设置是align-items: stretch。这意味着flex项目会自动扩展以涵盖cross axis的全部长度。在这种情况下，这就是宽度。
将容器中的垂直空间均匀分配到两个弹性项目中。

来源

2017-06-21 19:00:56

使用Flexbox的的想法是真的有效！谢谢。 –

它不适用于SAFARI。为什么？ –

什么在Safari中不起作用？我刚刚测试过，看起来不错。 –

灵活的宽度div旁边的固定宽度div

回答

相关问题