如何将这些div并排放在同一行上？

Question

如何重写使div堆栈堆叠在一起并全宽运行的CSS，从而使div从左到右运行？

具体地说，我如何修改这张卡底部的3 x .notion-callout或子代，它们从左到右运行，以确保它们彼此并排运行？

​

​

这样做的目的是让灰色方框的宽度只有图标所包含的宽度，而不是从左侧开始拉伸全宽。

(1)我所做的一件事是将visibility: hidden应用于那些框中的一些锚文本(我不能改变标记，只有CSS和CSS覆盖)。(2)我还倾注了许多类似的Stackoverflow线程。(3)我已经尝试应用了一系列显示值，即。inline、inline-block，但无法获取要约束的框宽度。

​

/*I believe this is the relevant CSS. There is also an ultimate parent class with `display: flex`.*/

.notion-root.full-width {
    width: 100%;
}
.notion-root {
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
}

.notion-callout {
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  border-radius: 5px;
  padding: 16px 16px 16px 12px;
  margin-top: 2px;
  margin-bottom: 4px;
  border: 1px solid transparent;
}

.notion-callout {
  position: relative !important;
}

.notion-callout__icon {
  width: 1.8em;
  line-height: 1.3em;
  padding: 1.2px;
}

.notion-callout__content {
  margin-left: 8px;
  visibility: hidden;
}

.notion-semantic-string {
  line-height: 1.5;
}

.notion-semantic-string {
  line-height: 1.5;
}

.notion-semantic-string .link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-text-default-light);
  opacity: .7;
  -moz-transition: border-color .1s ease-in, opacity .1s ease-in;
  transition: border-color .1s ease-in, opacity .1s ease-in;
}

.notion-callout a {
  padding: 0 0 2px 50px !important;
  align-items: center !important;
  position: absolute !important;
  display: flex !important;
  border: none !important;
  bottom: 0 !important;
  right: 0 !important;
  left: 0 !important;
  top: 0 !important;
}

<article id="block-44da810a1ed446bf9bf9c9ce058b1702" class="notion-root full-width">
  <h3 id="block-d55821810b9b4f199d3befb349f1b29e" class="notion-heading">
    <span class="notion-heading__anchor" id="d55821810b9b4f199d3befb349f1b29e"></span
        ><span class="notion-semantic-string"><span>Multiverse analyst</span></span>
  </h3>
  <div id="block-b26901cad4bf4def825f154ebe30e0c7" class="notion-text">
    <p class="notion-text__content">
      <span class="notion-semantic-string"><span
              >Lorem ipsum dolor ex magna. Interdum malesuada fames ac ante ipsum
              amet et faucibus. Pellentesque et venenatis.</span
            ></span
          >
        </p>
      </div>
      <div id="block-d6140ff909d34f99833ae73922f1a2e1" class="notion-text">
        <p class="notion-text__content">
          <span class="notion-semantic-string"></span>
    </p>
  </div>
  <div id="block-974b3353883a4998b6ca59807914ceb9" class="notion-callout bg-gray-light border">
    <div class="notion-callout__icon">
      <div style="
              overflow: hidden;
              box-sizing: border-box;
              display: inline-block;
              position: relative;
              width: 24px;
              height: 24px;
            ">
        <img alt="icon" src="/_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F755f0732-a73d-4410-b418-ff2f269a66b0.png&amp;w=640&amp;q=100" decoding="async" class="notion-icon" style="
                visibility: visible;
                position: absolute;
                inset: 0px;
                box-sizing: border-box;
                padding: 0px;
                border: medium none;
                margin: auto;
                display: block;
                width: 0px;
                height: 0px;
                min-width: 100%;
                max-width: 100%;
                min-height: 100%;
                max-height: 100%;
              " srcset="
                /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F755f0732-a73d-4410-b418-ff2f269a66b0.png&amp;w=640&amp;q=100 1x
              " />
      </div>
    </div>
    <p class="notion-callout__content">
      <span class="notion-semantic-string"><span
              ><a
                href="http://www.notionhq.com"
                class="notion-link link"
                target="_blank"
                rel="noopener noreferrer"
                >PollardsProgress</a
              ></span
            ></span
          >
        </p>
      </div>
      <div
        id="block-99956269608948c2a97ac5603368a892"
        class="notion-callout bg-gray-light border"
      >
        <div class="notion-callout__icon">
          <div
            style="
              overflow: hidden;
              box-sizing: border-box;
              display: inline-block;
              position: relative;
              width: 24px;
              height: 24px;
            "
          >
            <img
              alt="icon"
              src="/_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F3f605f41-8b78-4e86-b128-69e547cb34a3.png&amp;w=640&amp;q=100"
              decoding="async"
              class="notion-icon"
              style="
                visibility: visible;
                position: absolute;
                inset: 0px;
                box-sizing: border-box;
                padding: 0px;
                border: medium none;
                margin: auto;
                display: block;
                width: 0px;
                height: 0px;
                min-width: 100%;
                max-width: 100%;
                min-height: 100%;
                max-height: 100%;
              "
              srcset="
                /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2F3f605f41-8b78-4e86-b128-69e547cb34a3.png&amp;w=640&amp;q=100 1x
              "
            />
          </div>
        </div>
        <p class="notion-callout__content">
          <span class="notion-semantic-string"
            ><span
              ><a
                href="http://www.notionhq.com"
                class="notion-link link"
                target="_blank"
                rel="noopener noreferrer"
                >CaycePollard</a
              ></span
            ></span
          >
        </p>
      </div>
      <div
        id="block-22e0c2a2e50a409ba6606503372bfa41"
        class="notion-callout bg-gray-light border"
      >
        <div class="notion-callout__icon">
          <div
            style="
              overflow: hidden;
              box-sizing: border-box;
              display: inline-block;
              position: relative;
              width: 24px;
              height: 24px;
            "
          >
            <img
              alt="icon"
              src="/_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2Fee17734e-3566-4b32-b1e1-952dabc764bf.png&amp;w=640&amp;q=100"
              decoding="async"
              class="notion-icon"
              style="
                visibility: visible;
                position: absolute;
                inset: 0px;
                box-sizing: border-box;
                padding: 0px;
                border: medium none;
                margin: auto;
                display: block;
                width: 0px;
                height: 0px;
                min-width: 100%;
                max-width: 100%;
                min-height: 100%;
                max-height: 100%;
              "
              srcset="
                /_next/image?url=https%3A%2F%2Fapi.super.so%2Fasset%2Fdemo.notionware.shop%2Fee17734e-3566-4b32-b1e1-952dabc764bf.png&amp;w=640&amp;q=100 1x
              "
            />
          </div>
        </div>
        <p class="notion-callout__content">
          <span class="notion-semantic-string"
            ><span
              ><a
                href="http://www.medium.com"
                class="notion-link link"
                target="_blank"
                rel="noopener noreferrer"
                >Cayce's Musings</a
              ></span
            ></span
          >
        </p>
      </div>
      <div id="block-06ddcfa82b06404c87c3329408b97d7d" class="notion-text">
        <p class="notion-text__content">
          <span class="notion-semantic-string"></span>
    </p>
  </div>
</article>

​

Answer 1

如上所述，您可以使用CSS flex布局，也可以构建一个CSS grid layout。

​

/*I believe this is the relevant CSS. There is also an ultimate parent class with `display: flex`.*/

.notion-root{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto auto auto;
}
.notion-heading{
  grid-column: 1 /span 3;
  grid-row: 1;
}
.notion-text{
  grid-column: 1 /span 3;
  grid-row: 2;
}
.notion-callout {
  grid-row: 3;
  border-radius: 5px;
  padding: 16px 16px 16px 12px;
  margin-top: 2px;
  margin-bottom: 4px;
  border: 1px solid red;
}

.notion-callout__icon {
  width: 1.8em;
  line-height: 1.3em;
  padding: 1.2px;
}

.notion-callout__content {
  margin-left: 8px;
  visibility: hidden;
}

.notion-semantic-string {
  line-height: 1.5;
}

.notion-semantic-string {
  line-height: 1.5;
}

.notion-semantic-string .link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-text-default-light);
  opacity: .7;
  -moz-transition: border-color .1s ease-in, opacity .1s ease-in;
  transition: border-color .1s ease-in, opacity .1s ease-in;
}

.notion-callout a {
  padding: 0 0 2px 50px !important;
  align-items: center !important;
  position: absolute !important;
  display: flex !important;
  border: none !important;
  bottom: 0 !important;
  right: 0 !important;
  left: 0 !important;
  top: 0 !important;
}

<article id="block-44da810a1ed446bf9bf9c9ce058b1702" class="notion-root full-width">
  <h3 id="block-d55821810b9b4f199d3befb349f1b29e" class="notion-heading">
    <span class="notion-heading__anchor" id="d55821810b9b4f199d3befb349f1b29e"></span
        ><span class="notion-semantic-string"><span>Multiverse analyst</span></span>
  </h3>
  <div id="block-b26901cad4bf4def825f154ebe30e0c7" class="notion-text">
    <p class="notion-text__content">
      <span class="notion-semantic-string"><span
              >Lorem ipsum dolor ex magna. Interdum malesuada fames ac ante ipsum
              amet et faucibus. Pellentesque et venenatis.</span
            ></span
          >
        </p>
      </div>
      <div id="block-d6140ff909d34f99833ae73922f1a2e1" class="notion-text">
        <p class="notion-text__content">
          <span class="notion-semantic-string"></span>
    </p>
  </div>
  <div id="block-974b3353883a4998b6ca59807914ceb9" class="notion-callout bg-gray-light border">
    <div class="notion-callout__icon">
      <div style="
              overflow: hidden;
              box-sizing: border-box;
              display: inline-block;
              position: relative;
              width: 24px;
              height: 24px;
            ">
        <img alt="icon" src="https://picsum.photos/200" decoding="async" class="notion-icon" style="
                visibility: visible;
                position: absolute;
                inset: 0px;
                box-sizing: border-box;
                padding: 0px;
                border: medium none;
                margin: auto;
                display: block;
                width: 0px;
                height: 0px;
                min-width: 100%;
                max-width: 100%;
                min-height: 100%;
                max-height: 100%;
              " srcset="
                https://picsum.photos/200
              " />
      </div>
    </div>
    <p class="notion-callout__content">
      <span class="notion-semantic-string"><span
              ><a
                href="http://www.notionhq.com"
                class="notion-link link"
                target="_blank"
                rel="noopener noreferrer"
                >PollardsProgress</a
              ></span
            ></span
          >
        </p>
      </div>
      <div
        id="block-99956269608948c2a97ac5603368a892"
        class="notion-callout bg-gray-light border"
      >
        <div class="notion-callout__icon">
          <div
            style="
              overflow: hidden;
              box-sizing: border-box;
              display: inline-block;
              position: relative;
              width: 24px;
              height: 24px;
            "
          >
            <img
              alt="icon"
              src="https://picsum.photos/200"
              decoding="async"
              class="notion-icon"
              style="
                visibility: visible;
                position: absolute;
                inset: 0px;
                box-sizing: border-box;
                padding: 0px;
                border: medium none;
                margin: auto;
                display: block;
                width: 0px;
                height: 0px;
                min-width: 100%;
                max-width: 100%;
                min-height: 100%;
                max-height: 100%;
              "
              srcset="
                https://picsum.photos/200
              "
            />
          </div>
        </div>
        <p class="notion-callout__content">
          <span class="notion-semantic-string"
            ><span
              ><a
                href="http://www.notionhq.com"
                class="notion-link link"
                target="_blank"
                rel="noopener noreferrer"
                >CaycePollard</a
              ></span
            ></span
          >
        </p>
      </div>
      <div
        id="block-22e0c2a2e50a409ba6606503372bfa41"
        class="notion-callout bg-gray-light border"
      >
        <div class="notion-callout__icon">
          <div
            style="
              overflow: hidden;
              box-sizing: border-box;
              display: inline-block;
              position: relative;
              width: 24px;
              height: 24px;
            "
          >
            <img
              alt="icon"
              src="https://picsum.photos/200"
              decoding="async"
              class="notion-icon"
              style="
                visibility: visible;
                position: absolute;
                inset: 0px;
                box-sizing: border-box;
                padding: 0px;
                border: medium none;
                margin: auto;
                display: block;
                width: 0px;
                height: 0px;
                min-width: 100%;
                max-width: 100%;
                min-height: 100%;
                max-height: 100%;
              "
              srcset="
                https://picsum.photos/200
              "
            />
          </div>
        </div>
        <p class="notion-callout__content">
          <span class="notion-semantic-string"
            ><span
              ><a
                href="http://www.medium.com"
                class="notion-link link"
                target="_blank"
                rel="noopener noreferrer"
                >Cayce's Musings</a
              ></span
            ></span
          >
        </p>
      </div>
      <div id="block-06ddcfa82b06404c87c3329408b97d7d" class="notion-text">
        <p class="notion-text__content">
          <span class="notion-semantic-string"></span>
    </p>
  </div>
</article>

​