CSS：显示：内联块问题

Question

我有一个问题，就像我在一个部分中有 2 个 div，我想让它们彼此相邻，只是使用 display: inline-block;但即使我给了他们相同的宽度尺寸也不会发生。

HTML代码

<main>
        <div class="main">
            <section id="video-section">
                <div class="video">
                    <div class="video-img">
                        <img src="../../src/img/h3-video-img.jpg" alt="Fiorello">
                    </div>
                    <a href="https://www.youtube.com/watch?v=K-0cjGCNYfs&t=1s">
                        <div class="button-bg">
                            <div class="button-play-margin">
                                <div class="button-play">
                                    <i class="fa-solid fa-play"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="text-outter">
                    <div class="text">
                        <div class="text-heading">Suprise Your <span>Valentine!</span>  Let us arrange a smile. </div>
                        <div class="text-paragraph"> Where flowers are our inspiration to create lasting memories. Whatever the occasion... </div>
                        <div class="text-list">
                            <ul>
                                <li>Hand picked just for you.</li>
                                <li>Unique flower arrangements</li>
                                <li>Best way to say you care.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>

CSS代码

main .main {
    margin: 0 auto;
    max-width: 1300px;
}

main .main #video-section {
    width: 1300px;
    height: 420px;
    /* display: inline-block; */
}

main .main #video-section .video {
    position: relative;
    display: inline-block;
    max-width: 650px    ;
    height: 420px;
    overflow: hidden;
}

main .main #video-section .video .video-img {
    width: 650px;
    height: 420px;
    overflow: hidden;
}

main .main #video-section .video .video-img img {
    width: 100%;
    height: 100%;
    transition: all 0.25s ease-in-out;
    object-fit: cover;
}

main .main #video-section .video:hover .video-img img {
    transform: scale(1.05);
}

main .main #video-section .video a {
    position: absolute;
    display: inline-block;
    inset: 0;
    z-index: 1;
    width: 650px;
}

main .main #video-section .video a .button-bg {
    position: absolute;
    width: 103px;
    height: 103px;
    background-color: #fff;
    top: calc(420px / 2 - 103px / 2);
    left: calc(650px / 2 - 103px / 2);
    border-radius: 50%;
}

main .main #video-section .video a .button-bg::before {
    position: absolute;
    display: block;
    content: '';
    margin: 5px;
    width: 0;
    height: 0;
    border: 0 solid #ff0000;
    border-radius: 50%;
    transition: all 0.25s ease-in-out;
    top: 46.5px;
    left: 46.5px;
    opacity: 0;
}

main .main #video-section .video:hover a .button-bg::before {
    position: absolute;
    content: '';
    display: block;
    margin: 5px;
    width: 90%;
    height: 90%;
    inset: 0;
    border: 2px solid#ff0000;
    border-radius: 50%;
    top: -2px;
    left: -2px;
    opacity: 1;
    /* Ozum eledim -_- */
}

main .main #video-section .video a .button-bg .button-play-margin {
    position: absolute;
    width: 100%;
    height: 32px;
    top: calc(103px / 2 - 32px / 2);
    left: calc(103px / 2 - 24px /2);
}

main .main #video-section .video a .button-play {
    width: 24px;
    height: 100%;
    display: inline-block;
}

main .main #video-section .video a .button-play i {
    font-size: 2rem;
    color: #ff0000;
}

我已经发布了整个代码。 如果我的英语听不懂，我很抱歉，现在谢谢了。

我正在尝试使用 display: inline-block 将 2 个 div 并排放置； ，但没有浮动。

Answer 1

在您的代码中，您没有为

display: inline-block

类设置

text-outter

：

main .main {
    margin: 0 auto;
    max-width: 1300px;
}

main .main #video-section {
    width: 1300px;
    height: 420px;
    /* display: inline-block; */
}

main .main #video-section .video {
    position: relative;
    display: inline-block;
    max-width: 650px    ;
    height: 420px;
    overflow: hidden;
}

main .main #video-section .video .video-img {
    width: 650px;
    height: 420px;
    overflow: hidden;
}

main .main #video-section .video .video-img img {
    width: 100%;
    height: 100%;
    transition: all 0.25s ease-in-out;
    object-fit: cover;
}

main .main #video-section .video:hover .video-img img {
    transform: scale(1.05);
}

main .main #video-section .video a {
    position: absolute;
    display: inline-block;
    inset: 0;
    z-index: 1;
    width: 650px;
}

main .main #video-section .video a .button-bg {
    position: absolute;
    width: 103px;
    height: 103px;
    background-color: #fff;
    top: calc(420px / 2 - 103px / 2);
    left: calc(650px / 2 - 103px / 2);
    border-radius: 50%;
}

main .main #video-section .video a .button-bg::before {
    position: absolute;
    display: block;
    content: '';
    margin: 5px;
    width: 0;
    height: 0;
    border: 0 solid #ff0000;
    border-radius: 50%;
    transition: all 0.25s ease-in-out;
    top: 46.5px;
    left: 46.5px;
    opacity: 0;
}

main .main #video-section .video:hover a .button-bg::before {
    position: absolute;
    content: '';
    display: block;
    margin: 5px;
    width: 90%;
    height: 90%;
    inset: 0;
    border: 2px solid#ff0000;
    border-radius: 50%;
    top: -2px;
    left: -2px;
    opacity: 1;
    /* Ozum eledim -_- */
}

main .main #video-section .video a .button-bg .button-play-margin {
    position: absolute;
    width: 100%;
    height: 32px;
    top: calc(103px / 2 - 32px / 2);
    left: calc(103px / 2 - 24px /2);
}

main .main #video-section .video a .button-play {
    width: 24px;
    height: 100%;
    display: inline-block;
}

main .main #video-section .video a .button-play i {
    font-size: 2rem;
    color: #ff0000;
}

.text-outter{
  display: inline-block;
    max-width: 650px;
    height: 420px;
}

<main>
  <div class="main">
    <section id="video-section">
      <div class="video">
        <div class="video-img">
          <img src="../../src/img/h3-video-img.jpg" alt="Fiorello">
        </div>
        <a href="https://www.youtube.com/watch?v=K-0cjGCNYfs&t=1s">
          <div class="button-bg">
            <div class="button-play-margin">
              <div class="button-play">
                <i class="fa-solid fa-play"></i>
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="text-outter">
        <div class="text">
          <div class="text-heading">Suprise Your <span>Valentine!</span> Let us arrange a smile. </div>
          <div class="text-paragraph"> Where flowers are our inspiration to create lasting memories. Whatever the occasion... </div>
          <div class="text-list">
            <ul>
              <li>Hand picked just for you.</li>
              <li>Unique flower arrangements</li>
              <li>Best way to say you care.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</main>

Answer 2

您正在为

display: inline-block

div 定义

video

，但另一个 div，

text-outter

默认为

display:block

，并且如您所知，块不允许旁边有任何 HTML 元素。

您必须通过添加一些额外的 css

 来覆盖 

display:block

 div 的默认 

text-outter

属性

main .text-outter{
  display: inline-block;
}

毕竟我建议你使用

display:flex

而不是

display:inline-block

Answer 3

您的 CSS 未应用于

<div class="text-outer"> </div>

我已经在你的 div 上应用了一些 css outer-text

// 里面内容相同