我有两个 div 容器。第一个容器固定为 300px。第二个 div 应该填充外部 div。为了解决这个问题,我使用了 flexboxes。我现在的问题是,第二个 div 不包装内容。我该如何解决这个问题?
Here is a JSfiddle
*{
margin: 0px;
padding: 0px;
}
.content{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 300px;
padding: 10px;
border: 1px solid black;
}
.left{
width: 200px;
float: left;
background-color: red;
height: 20px;
margin-right: 10px;
}
.right{
flex-grow: 1;
float: right;
background-color: green;
height: 20px;
}
.clearBoth{
clear: both;
}
<div class="content">
<div class="left">
</div>
<div class="right">
Here is Some Text
</div>
<div class="clearBoth"></div>
</div>
最佳答案
首先你不能用float
在 flex 容器中,原因是 float 属性不适用于 flex 级别的框 .
您还应该删除 height
来自 .right
元素和使用 flex: 1
反而。
* {
margin: 0px;
padding: 0px;
}
.content {
display: flex;
width: 300px;
padding: 10px;
border: 1px solid black;
}
.left {
width: 200px;
background-color: red;
height: 10px;
margin-right: 10px;
}
.right {
flex: 1;
background-color: blue;
color: white;
}
<div class="content">
<div class="left"></div>
<div class="right">Here is Some Text</div>
</div>
关于html - 将文本包裹在 flex 元素中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36290905/