求助：使用display: inline-block无法实现两个div并排的问题

在section容器内有两个div，已设置相同宽度并尝试用display: inline-block让它们并排，但效果没实现，不想使用float属性。

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;
}

宽度验证截图 #

问题根源 #

1. 你只给.video加了display: inline-block，.text-outter没设置这个属性，默认是块级元素，自然会换行。
2. 就算两个都加了inline-block，HTML代码里两个div之间的换行/空格会被渲染成一个空白字符，加上两个div宽度刚好是容器的一半（650*2=1300），这个空白会让总宽度超过容器，导致第二个div被挤到下一行。

解决办法 #

步骤1：给两个div都加inline-block

先给.text-outter补上属性，同时把.video的max-width改成固定width，确保宽度一致：

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

步骤2：消除空白字符影响

选下面任意一种方法即可：

• 方法一：删掉HTML里的空白
  把两个div的代码连在一起写，去掉中间的换行和空格：

<div class="video">...</div><div class="text-outter">...</div>

• 方法二：父容器设font-size: 0
  给父容器#video-section设置font-size: 0，再给子div恢复正常字号：

main .main #video-section {
    width: 1300px;
    height: 420px;
    font-size: 0; /* 消除inline-block空白 */
}

main .main #video-section .video,
main .main #video-section .text-outter {
    font-size: 16px; /* 恢复文字大小 */
}

• 方法三：负margin抵消空白
  给两个div加margin-right: -4px（空白字符宽度通常是4px）：

main .main #video-section .video,
main .main #video-section .text-outter {
    margin-right: -4px;
}

额外提示 #

如果需要响应式布局，可以把固定宽度改成calc(50% - 2px)，配合消除空白的方法，这样不用写死650px，适配不同容器宽度。

内容的提问来源于stack exchange，提问作者mrshmll_o