Html CSS:div中的浮动元素，水平填充剩余空间

我想在中间div中浮动元素，它水平地填充剩余的空间。crDiv应该向左浮动到symDiv。当前它将在下一行中显示

.tContainer{
  width: 350px;
  border: 1px solid #000;
}

.parentDiv{
  width: 100%
  overflow: hidden;
}

.pointerLeft{
  float: left;
  width: 16px;
}

.checkBoxDiv{
  float: right;
  width: 16px;
}

.eleDiv{
  margin-left: 16px;
  margin-right: 16px;
}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

我想要的是：

我得到的是：

---

尝试添加以下CSS规则：

.crDiv , .symDiv {
  display: inline;
}

---

尝试添加以下CSS规则：

.crDiv , .symDiv {
  display: inline;
}

---

使用

flex

CSS来实现这一点：

.eleDiv {    
  display: flex;
} 

---

使用

flex

CSS来实现这一点：

.eleDiv {    
  display: flex;
} 

---

使用引导网格为元素设置大小

---

使用引导网格为元素设置大小

---

这就是你想要的吗

<div class="tContainer">
<div class="parentDiv">
  <div class="glyphicon glyphicon-triangle-right pointerLeft"></div>
    <div class="checkBoxDiv">
    <input type="checkbox" class="CheckBox" name="CheckBox">    
  </div>
    <div class="eleDiv">
        <div class="symDiv">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</div>
        <div class="crDiv">
        <div class="glyphicon glyphicon-triangle-right pointerright"/> D
        </div>
    </div>

</div>

</div>


.tContainer{
  width: 350px;
  border: 1px solid #000;
  display:block;
}

.parentDiv{
  width: 100%
  display:block;
}

.pointerLeft{
  float: left;
  width: 16px;
}

.checkBoxDiv{
  float: right;
  width: 16px;
}

.eleDiv{
  margin-left: 16px;
  margin-right: 16px;
  overflow: hidden;
}

.symDiv{
  float: right;
  width: 90%
}

.crDiv{
  float: left;
}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
D
.t集装箱{
宽度：350px；
边框：1px实心#000；
显示：块；
}
.parentDiv{
宽度：100%
显示：块；
}
.指针左{
浮动：左；
宽度：16px；
}
.checkBoxDiv{
浮动：对；
宽度：16px；
}
埃莱迪夫先生{
左边距：16像素；
右边距：16px；
溢出：隐藏；
}
赛姆迪夫先生{
浮动：对；
宽度：90%
}
.crDiv{
浮动：左；
}

---

我把字母D改为绑定字形图标，但应该没问题。

这就是你想要的吗

<div class="tContainer">
<div class="parentDiv">
  <div class="glyphicon glyphicon-triangle-right pointerLeft"></div>
    <div class="checkBoxDiv">
    <input type="checkbox" class="CheckBox" name="CheckBox">    
  </div>
    <div class="eleDiv">
        <div class="symDiv">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</div>
        <div class="crDiv">
        <div class="glyphicon glyphicon-triangle-right pointerright"/> D
        </div>
    </div>

</div>

</div>


.tContainer{
  width: 350px;
  border: 1px solid #000;
  display:block;
}

.parentDiv{
  width: 100%
  display:block;
}

.pointerLeft{
  float: left;
  width: 16px;
}

.checkBoxDiv{
  float: right;
  width: 16px;
}

.eleDiv{
  margin-left: 16px;
  margin-right: 16px;
  overflow: hidden;
}

.symDiv{
  float: right;
  width: 90%
}

.crDiv{
  float: left;
}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
D
.t集装箱{
宽度：350px；
边框：1px实心#000；
显示：块；
}
.parentDiv{
宽度：100%
显示：块；
}
.指针左{
浮动：左；
宽度：16px；
}
.checkBoxDiv{
浮动：对；
宽度：16px；
}
埃莱迪夫先生{
左边距：16像素；
右边距：16px；
溢出：隐藏；
}
赛姆迪夫先生{
浮动：对；
宽度：90%
}
.crDiv{
浮动：左；
}

---

我将字母D改为绑定glyphicon，但它应该可以。

我不确定您到底想要什么，但听起来很像可以帮助您。我想在symDiv旁边添加crDiv，但它将出现在下一行……我不确定您到底想要什么，但是听起来很像我可以帮你。我希望crDiv在symDiv旁边，但它会出现在下一行…虽然链接可能会提供答案，但最好在你的答案中发布帖子的任何相关部分，链接必须永远不会消失。如果他到目前为止没有使用BS（将在代码中可见）使用整个框架来纠正这一点并不是最好的主意虽然链接可能会提供答案，但最好在你的答案中发布文章的任何相关部分，链接一定会消失。如果他到目前为止没有使用BS（代码中可以看到），使用整个框架来纠正这一点也不是最好的主意