将 <div> 元素扩展到屏幕宽度

Question

我有 (2) div 个元素显示为 inline-block 个。

我正在尝试使包裹在 <p> 元素周围的第二个 div 容器延伸到屏幕的宽度。不确定如何完成此操作。

理想情况下，红色容器会向右延伸到屏幕边缘。

<div style="background-color: grey; width:16px; display: inline-block;">
  <p>-</p>
</div>
<div style="background-color: red; display: inline-block;">
  <p>Test Text</p>
</div>

Answer 1

您希望第二个块表现得像 display: block（占用尽可能多的宽度），同时保持第一个块为 display: inline-block。

因此，在这种情况下，您需要 float: left，而不是 display: inline-block。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="background-color: grey; width:16px; float:left">
        <p>-</p>
    </div>
    <div style="background-color: red;">
        <p>Test Text</p>
    </div>
</body>
</html>

注意：更现代的方法是使用display: flex.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="display: flex;">
      <div style="background-color: grey; width:16px;">
          <p>-</p>
      </div>
      <div style="background-color: red; flex: 1;">
          <p>Test Text</p>
      </div>
    </div>
</body>
</html>

Answer 2

如果你想让你的元素保持display: inline-block，你可以使用calculation-driven变量，设置第二个div占用100%的宽度容器的减去第一个元素的宽度（和边距）：

:root {
  --left-width: 16px;
}

div:nth-of-type(1) {
  display: inline-block;
  background-color: grey;
  width: var(--left-width);
}

div:nth-of-type(2) {
  display: inline-block;
  background-color: red;
  width: calc(100% - var(--left-width) - 4px);
}

<div>
  <p>-</p>
</div>
<div>
  <p>Test Text</p>
</div>

将 <div> 元素扩展到屏幕宽度

Expand <div> Element to Width of screen

html

css

expand