Question

我想在中间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;
}

<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"/>
        </div>
    </div>

</div>

</div>

我想要的： Image

我得到了什么： https://codepen.io/anon/pen/jLXxqJ

Answer 1

尝试添加以下CSS规则：

.crDiv , .symDiv {
  display: inline;
}

Answer 2

使用flex CSS实现此目的：

.eleDiv {    
  display: flex;
}

Answer 3

使用Bootstrap网格在元素上添加大小 https://getbootstrap.com/docs/3.3/examples/grid/

Answer 4

这是你想要的吗？

<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;
}

Fiddle

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

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

4 个答案: