Question

我不能为我的生活找出为什么这种技术不起作用。无论我做什么，左侧div在调整为float:right; div时都是100％。

＆＃13;

.chat-container {
  background: black;
  height: 60px;
}
.chat-bar {
  height: 60px;
  width: 340px;
  float: right;
  background: rgba(255, 0, 0, 0.4);
}

＆＃13;

<div class="chat-bar">

</div>
<div class="chat-container">

</div>

＆＃13;

有趣的事情正在发生。我按照教程进行操作，但它不起作用，但它适用于其他一些元素。我瞎了吗？

Answer 1

你错过了：

.chat-container {
    overflow: hidden;
}

DEMO：https://jsfiddle.net/jw727odf/1/

Answer 2

使用float将从正常文档流中删除元素，因此它不会影响其他元素的宽度。如果要保持浮动，则需要为两个元素指定宽度。尝试使用calc()，如下所示：

.chat-container {
  background: black;
  height: 60px;
  width: calc(100% - 340px);
}
.chat-bar {
  height: 60px;
  width: 340px;
  float: right;
  background: rgba(255, 0, 0, 0.4);
}

<div class="chat-bar">

</div>
<div class="chat-container">

</div>

或者你可以用百分比来设置两者的宽度，但是你将失去固定的宽度：

.chat-container {
  background: black;
  height: 60px;
  width: 55%;
}
.chat-bar {
  height: 60px;
  width: 45%;
  float: right;
  background: rgba(255, 0, 0, 0.4);
}

<div class="chat-bar">

</div>
<div class="chat-container">

</div>

固定宽度div和浮动：右; div不工作

2 个答案: