如何使一行内首个DIV宽度大于第二、第三个DIV？能否用float实现？

当然可以用float属性来实现你的需求！而且调整起来非常直观，我们只需要修改宽度数值，同时处理好浮动布局的小细节就行。

用float实现的步骤 #

• 调整宽度值：你当前代码里第一个DIV宽度是150px，比另外两个的200px小，只需要把.item-1的宽度改得更大（比如设为300px），.item-2和.item-3保持稍小的宽度（比如150px），这样第一个容器就会自然比另外两个宽。
• 处理父容器塌陷：当子元素都使用float后，父容器（这里是<body>）会失去高度，我们可以给父容器添加overflow: hidden，或者用伪元素清除浮动，避免布局混乱。

修改后的完整代码 #

<html>
<head>
<style>
/* 给父容器添加样式解决浮动塌陷问题 */
body {
  overflow: hidden;
  margin: 0;
  padding: 10px;
}
div.item-1 {
  float: left;
  width: 300px; /* 调整为更大的宽度 */
  height: 240px;
  border: 1px solid #000;
  margin-right: 10px; /* 可选：添加间距让布局更美观 */
}
div.item-2 {
  float: left;
  width: 150px; /* 缩小宽度 */
  height: 140px;
  border: 1px solid #000;
  margin-right: 10px;
}
div.item-3 {
  float: left;
  width: 150px; /* 和第二个容器保持一致宽度 */
  height: 140px;
  border: 1px solid #000;
}
</style>
</head>
<body>
<div class="item-1">.1.（宽度更大的容器）</div>
<div class="item-2">.2.</div>
<div class="item-3">.3.</div>
</body>
</html>

补充：更现代的Flexbox方案 #

如果你不想用float，现在更推荐用Flexbox布局——它更灵活，不需要处理浮动塌陷的问题，代码也更简洁：

<html>
<head>
<style>
body {
  display: flex; /* 开启Flex布局 */
  gap: 10px; /* 直接设置容器间的间距 */
  margin: 0;
  padding: 10px;
}
div.item-1 {
  flex: 2; /* 占2份宽度 */
  height: 240px;
  border: 1px solid #000;
}
div.item-2, div.item-3 {
  flex: 1; /* 各占1份宽度，自然比第一个容器小 */
  height: 140px;
  border: 1px solid #000;
}
</style>
</head>
<body>
<div class="item-1">.1.（宽度更大的容器）</div>
<div class="item-2">.2.</div>
<div class="item-3">.3.</div>
</body>
</html>

这个方案里，flex属性按比例分配宽度，不管屏幕大小，第一个容器始终是另外两个的2倍宽，而且自动保持在一行。

内容的提问来源于stack exchange，提问作者Ł.Strzelczyk