CSS 两个 div 元素同行显示，一个动态宽度，一个固定宽度

在本文中，我们将介绍如何使用 CSS 实现两个 div 元素同行显示的布局，其中一个 div 的宽度是动态的，另一个 div 的宽度是固定的。

阅读更多：CSS 教程

实现方式

要实现两个 div 元素同行显示，我们可以使用 CSS 的浮动（float）属性。首先，我们需要定义一个容器元素，可以使用 div 标签，并为其添加一个唯一的 class 名称，比如 “container”。然后，分别创建两个 div 元素，给它们分别添加对应的 class 名称，比如 “dynamic” 和 “fixed”。

接下来，我们需要为容器元素设置浮动。可以通过添加如下 CSS 代码来实现：

.container {
  float: left;
}

然后，我们可以为两个 div 元素添加对应的样式代码。

动态宽度的 div

如果我们想要一个 div 的宽度是动态的，它将根据内容的长度自动调整宽度，我们可以使用 CSS 的 display 属性和 float 属性来实现。

首先，我们可以为这个 div 添加一个唯一的 class 名称，比如 “dynamic”。然后，可以添加如下的 CSS 代码：

.dynamic {
  display: inline-block;
  float: left;
}

这样，这个 div 元素将会根据内部内容的长度自动调整宽度，并且与其他 div 元素同行显示。

固定宽度的 div

如果我们想要一个 div 的宽度是固定的，不会随内容的长度而变化，我们可以使用 CSS 的 width 属性来实现。

首先，我们可以为这个 div 添加一个唯一的 class 名称，比如 “fixed”。然后，可以添加如下的 CSS 代码：

.fixed {
  width: 200px; /* 这里可以修改为你想要的固定宽度值 */
  float: left;
}

这样，这个 div 元素的宽度将会固定为指定的宽度，并且与其他 div 元素同行显示。

示例

下面是一个示例，演示了如何使用 CSS 实现两个 div 元素同行显示，一个动态宽度，一个固定宽度的布局：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  float: left;
}

.dynamic {
  display: inline-block;
  float: left;
}

.fixed {
  width: 200px;
  float: left;
}
</style>
</head>
<body>

<div class="container">
  <div class="dynamic">
    这个 div 的宽度是根据内容的长度自动调整的。
  </div>
  <div class="fixed">
    这个 div 的宽度是固定的，不会随内容的长度而变化。
  </div>
</div>

</body>
</html>

在上面的示例中，我们创建了一个容器 div，其中包含了一个动态宽度的 div 和一个固定宽度的 div。通过设置各自的 CSS 属性，我们实现了两个 div 元素同行显示的效果。