Question

在div内创建第一行后，当我创建第二行时，会发生一些奇怪的事情。

我在第一个div的结尾和第二个div之间有一个间隙。

我无法找到我必须做的事情，或者我必须改变的地方。

任何人都可以帮助我吗？

铬： chrome

火狐： firefox

HTML：

<div class="features">
    <div id="highlight" class="outerbox">   
        <div id="boxTitle">
            Highlight
        </div>
        asduasukdgskudgksdasduasukdgskudgksdasduasukdgskudgksd
    </div>

    <div class="firstLine">
        <div class="firstLineLeft">
            <div id="cultureNews" class="outerbox">
                <div id="boxTitle">
                    Culture News
                </div>asduasukdgskudgksdasduasukdgskudgksdasduasukdgskudgksd
            </div>
        </div>

        <div class="firstLineRight">
            <div id="firstLineRightUp">
                <div id="portfolio" class="outerbox">
                    <div id="boxTitle">
                        Portfolio
                    </div>asduasukdgskudgksdasduasukdgskudgksdasduasukdgskudgksd
                </div>
            </div>
            <div id="firstLineRightDown">
                <div id="culturenews1" class="outerbox">
                        <div id="boxTitle">
                            Portfolio
                        </div>asduasukdgskudgksdasduasukdgskudgksdasduasukdgskudgksd
                </div>
            </div>
        </div>

    </div>
    olá
    <div class="secondLine">
        <div id="secondLineLeft" class="outerbox">
    teste
        </div>
        <div id="secondLineRight" class="outerbox">
teste
        </div>
    </div>
</div>

CSS：

.features { 
    width: 1024px;
    height: 100%; 
    background-color: #1a1a1a; 
    margin-top: 10%; 
    margin-bottom: 10%; 
    margin: 0 auto;
    position: relative;
}
.features p#featuresTitle { text-align: center; color: #FFFFFF; font-family: Montserrat; font-weight: bold; font-size: 24px; margin-top: 10%; margin-bottom: 5%; }
#boxTitle { color: #ffffff; background-color: #6000ff; padding: 5px 5px 5px 5px; position: absolute; font-family: Montserrat; font-size: 13px; display: inline-block; top: 0; left: 0; }

.featuresInfo { position: absolute; width: 30%; height: 100%; top: 0; right: 0; }
.featuresInfo span { display: block; }
.featuresInfo span#readMore{ text-decoration: underline;position: absolute;margin-right: 35px;color: #ffffff;font-size: 11px;bottom: 20px;right: 0; }
.featuresInfo #info {position: absolute;width: 100%;height: 100%;float: right;background-color: #000000; color: #ffffff; }
.featuresInfo #info #title { margin-top: 55px;font-size: 16px;background-color: #000000;margin-left: -70px;padding: 5px; }
.featuresInfo #info #secondTitle { font-size: 16px;background-color: #000000;margin-left: -70px;margin-top: 2px; padding: 5px; }
.featuresInfo #info #thirdTitle { font-size: 16px; background-color: #000000;margin-left: -70px; margin-top: 2px; padding: 5px; }
.featuresInfo #info #fourthTitle { font-size: 14px; margin-top: 25px; margin-left: 20px; padding: 5px; }
.featuresInfo #info #description { font-size: 13px; margin-top: 35px; margin-left: 20px; padding: 5px; }

#highlight { width: 100%; display: inline-block; position: relative; border: 2px solid transparent; }
#highlight img { width: 100%; height: 100%; vertical-align:top; }
#highlight:hover { border: 2px solid #6000ff; overflow: hidden; }

.firstLine { width: 100%; height: 100%; display: inline-block; position: relative; margin-top: 5px; }
.secondLine { width: 100%; height: 100%; display: inline-block; position: relative;}


.firstLineLeft { width: 65.5%; display: inline-block; float: left; }
#cultureNews { position: relative; border: 2px solid transparent; }
#cultureNews img { width: 100%; height: 100%; vertical-align:top;}
#cultureNews:hover { border: 2px solid #6000ff; overflow: hidden; }
#cultureNews .featuresInfo { width: 50%; }

.firstLineRight { width: 34%; display: inline-block; margin-left: 5px;}
.firstLineRight #firstLineRightUp { height: 50%; }
#portfolio { position: relative; border: 2px solid transparent; }
#portfolio  img { width: 100%; height: 100%; vertical-align:top;}
#portfolio:hover { border: 2px solid #6000ff; overflow: hidden; }
#portfolio .featuresInfo  { width: 50%; }
#portfolio .featuresInfo #title { margin: 0; font-size: 13px; margin-top: 20px; margin-left: 15px; }
#portfolio .featuresInfo #secondTitle { margin: 0; font-size: 10px; margin-left: 15px; }
#portfolio .featuresInfo #thirdTitle { margin: 0; font-size: 10px; margin-left: 15px; }
#portfolio .featuresInfo #description { margin: 0; font-size: 12px; margin-top: 20px; margin-left: 15px; }

.firstLineRight #firstLineRightDown { height: 50%; margin-top: 5px; }
#culturenews1 { position: relative; border: 2px solid transparent; }
#culturenews1  img { width: 100%; height: 100%; vertical-align:top; }
#culturenews1:hover { border: 2px solid #6000ff; overflow: hidden; }
#culturenews1 .featuresInfo { width: 50%; }
#culturenews1 .featuresInfo #title { margin: 0; font-size: 13px; margin-top: 20px; margin-left: 15px; }
#culturenews1 .featuresInfo #secondTitle { margin: 0; font-size: 10px; margin-left: 15px; }
#culturenews1 .featuresInfo #thirdTitle { margin: 0; font-size: 10px; margin-left: 15px; }
#culturenews1 .featuresInfo #description { margin: 0; font-size: 12px; margin-top: 20px; margin-left: 15px; }

#secondLineLeft, #secondLineRight { width: 100px; height: 50px; display: inline-block; background-color: red; }

Answer 1

这是因为您在两个div之间的HTML中有空间。如果您将其更改为：

<div id="secondLineLeft" class="outerbox">
    teste
</div><div id="secondLineRight" class="outerbox">
    teste
</div>

它会消失。

还有其他一些解决方案。在css-tricks.com上有一篇关于它的好文章。

这是一个简短的清单：

删除标签之间的空格（见上文）
使用负边距
将font-size设为0
使用float: left代替inline-block

div之间的东西

1 个答案: