CSS 如何在不指定宽度的情况下将两个div并排浮动

在本文中，我们将介绍如何使用CSS来实现两个div并排浮动，而不需要指定它们的宽度。

阅读更多：CSS 教程

浮动布局概述

在网页设计中，浮动布局是常用的一种布局方式。通过使用浮动属性，我们可以将元素在容器内水平或垂直地排列。在CSS中，可以通过设置元素的float属性来实现浮动。对于要浮动在一起的元素，我们可以将它们的float属性设置为left或right。

不指定宽度的浮动布局

通常情况下，浮动布局需要指定元素的宽度。然而，有时候我们希望让两个div并排浮动，但又不想指定它们的具体宽度。这时，我们可以使用一些技巧来实现。

使用百分比宽度

一种常见的方法是使用百分比宽度。为了让两个div并排浮动，我们可以给它们设置相同的百分比宽度，使它们占据容器的相同比例。

.div1, .div2 {
  float: left;
  width: 50%;
}

通过将以上代码应用于两个div元素，它们将并排浮动，并且每个div占据容器的50%宽度。

使用Flexbox布局

Flexbox是CSS3引入的新的布局模块，它提供了更强大且灵活的布局能力。通过使用Flexbox，我们可以实现两个div并排浮动，而不需要指定它们的宽度。

首先，我们需要将容器的display属性设置为flex，以启用Flexbox布局。

.container {
  display: flex;
}

然后，我们可以使用flex-grow属性来控制每个div的扩展比例。

.div1, .div2 {
  flex-grow: 1;
}

通过将以上代码应用于两个div元素，它们将并排浮动，并且自动平分容器的宽度。

使用Grid布局

另一种方法是使用CSS Grid布局。CSS Grid布局提供了更高级的网格系统，可以实现复杂的布局。

首先，我们需要将容器的display属性设置为grid，以启用Grid布局。

.container {
  display: grid;
}

然后，我们可以使用grid-template-columns属性来定义每个列的宽度。

.container {
  grid-template-columns: auto auto;
}

通过将以上代码应用于容器，我们可以将两个div并排浮动，并且它们的宽度会根据内容自动调整。

示例演示

下面是一个简单的示例，演示了如何实现不指定宽度的浮动布局。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      border: 1px solid black;
      overflow: auto;
    }
    .div1, .div2 {
      float: left;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="div1">
      <h2>Div 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="div2">
      <h2>Div 2</h2>
      <p>Nullam in metus non eros faucibus iaculis ut nec ipsum.</p>
    </div>
  </div>
</body>
</html>

在上面的示例中，我们使用了float属性和padding来实现不指定宽度的浮动布局。.container类设置了一个边框，以便更好地展示两个div的浮动效果。