Question

我有以下 HTML ：

<div style="width:300px;background:yellow;">
    <div style="float:left;border:solid 2px red;"><!--Img Div-->
      <img src="https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Dancing-minion-icon.png">
    </div>
    <div style="border:solid 2px lime;float:left;"><!--Text Div-->
      Banana!
    </div>
    <div style="clear:both;"></div>
</div>

我需要设置 Text Div 的宽度，使占用剩余宽度。我知道可以使用 width 样式属性作为width:164px;来完成此操作。我需要知道的是：这可以完成 而无需使用其他css属性手动设置宽度 吗？

Answer 1

1）从文本div中删除float:left

2）在文本div上设置overflow:hidden（或自动）

<强> Updated fiddle

这将创建一个新的块格式化上下文，使文本div填充剩余的宽度

Answer 2

试试这个

<div style="width:300px;background:yellow;">
        <div style="float:left;border:solid 2px red;"><!--Img Div-->
          <img src="https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Dancing-minion-icon.png">
        </div>
        <div style="border:solid 2px lime;display:block; text-align: center; overflow: hidden;"><!--Text Div-->
          Banana!
        </div>
        <div style="clear:both;"></div>
    </div>

我添加了display:block; text-align: center; overflow: hidden;并从文本div中删除了float: left

Answer 3

将display:table用于父级，display:table-cell用于您希望width填写

的用户

注意：将你的风格移到

之外

＆＃13;

.top {
  width: 300px;
  background: yellow;
  display: table;
}
.inside {
  float: left;
  border: solid 2px red;
}
.txt {
  border: solid 2px lime;
  display: table-cell;
  width: 100%;
  vertical-align: top;
}
.clear {
  clear: both;
}

＆＃13;

<div class="top">
  <div class="inside">
    <!--Img Div-->
    <img src="https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Dancing-minion-icon.png" />
  </div>
  <div class="txt">
    <!--Text Div-->Banana!</div>
  <div class="clear"></div>
</div>

＆＃13;

当两个div浮动时设置div的宽度（自动）

3 个答案: