css 同一行一左一中

可以使用 flex 布局实现，将两个元素包裹在一个容器内，并设置容器的 display 属性为 flex，然后对其中一个元素设置 flex-grow 和 flex-shrink 属性为 0，flex-basis 属性为 auto，即可让它占据自己本来的宽度，对另一个元素设置相应的 flex 属性，即可让它占据剩余的宽度。例如：

<div style="display: flex;">
  <div style="flex: 0 0 auto;">左侧元素</div>
  <div style="flex: 1;">中间元素</div>
</div>

相关问题

css 两个div顶部 同一行

可以使用CSS中的display属性和float属性，将两个div元素都设置为float:left或display:inline-block，再设置它们的vertical-align属性为top，就可以让它们在同一行且顶部对齐了。下面是一个示例代码：

<div style="float:left; vertical-align:top;">div1</div>
<div style="float:left; vertical-align:top;">div2</div>

或者：

<div style="display:inline-block; vertical-align:top;">div1</div>
<div style="display:inline-block; vertical-align:top;">div2</div>

css两个div放在同一行

要让两个 div 放在同一行，可以使用 CSS 的 `display: inline-block;` 或 `float: left;` 属性。

使用 `display: inline-block;`：

<div style="display: inline-block;">div1</div>
<div style="display: inline-block;">div2</div>

使用 `float: left;`：

<div style="float: left;">div1</div>
<div style="float: left;">div2</div>

需要注意的是，使用 `float: left;` 时，可能需要清除浮动，以免影响后面的布局。可以在两个 div 的后面加上一个空的 div 并添加 `clear: both;` 属性来清除浮动：

<div style="float: left;">div1</div>
<div style="float: left;">div2</div>
<div style="clear: both;"></div>