爲什麼我的盒子沒有出現在我的部分？

Question

我不明白爲什麼我創建的盒子沒有出現在我的部分。我有一個幻燈片上面，但我不認爲它影響它。我已檢查過它的尺寸應該適合該部分，但它顯示在下面。 What it looks like

這裏是我的HTML：

#main { 
 
    clear: both; 
 
    width: 960px; 
 
    height: 350px; 
 
    background-color: #7EFFF7; 
 
} 
 

 
.gojima {} 
 

 
.article1 { 
 
    float: right; 
 
    display: inline-block; 
 
    background: -moz-linear-gradient(top, #77ebcf 20%, #ffffff 20%); 
 
    /* FF3.6-15 */ 
 
    position: relative; 
 
    border-top-style: solid; 
 
    border-right-style: solid; 
 
    border-bottom-style: solid; 
 
    border-color: #e1e1e1; 
 
    height: 295px; 
 
    width: 650px; 
 
    margin-right: 0px; 
 
} 
 

 
.article1 h1 { 
 
    font-size: 30px; 
 
    text-align: center; 
 
    position: relative; 
 
    bottom: 15px; 
 
    font-family: 'Economica', sans-serif; 
 
} 
 

 
.article1 p { 
 
    font-size: 20px; 
 
    padding-left: 15px; 
 
    padding-top: 10px; 
 
    padding-right: 15px; 
 
    font-family: 'Playfair Display', serif; 
 
} 
 

 
#main2 { 
 
    clear: both; 
 
    width: 960px; 
 
    height: 350px; 
 
    background-color: #000; 
 
}

<section id="main"> 
 
    <div class="gojima"> 
 
    <a href="#"><img src="images/pic1.jpg" alt="hp1" width="300" height="300" /></a> 
 
    </div> 
 

 
    <div class="article1"> 
 
    <h1> THE RICE BURGER TREND</h1> 
 
    <p>Guess what? Burger nerds stuck in an unending "brioche vs milk bun" argument now have a new topic to battle: the bun-free burger. They can test out the merits of this trend at Gojima, Sydney's first rice burger bar, which opened at The Star.</p> 
 
    </div> 
 

 
</section> 
 

 

 
<section id="main2"> 
 
    <div class="mbassy"> 
 
    <a href="#"><img src="images/pic2.jpg" alt="hp2" width="300" height="300" /></a> 
 
    </div> 
 

 
    <div class="article2"> 
 
    <h2> THE LOCAL EMBASSY BOILER-ROOM</h2> 
 
    <p> On a bright corner of Wattle Street in Ultimo is a busy cafe, The Local Mbassy. Soft music from the ‘20s plays and locals enjoy the view across Wentworth Park, tucking into burgers, pancakes and pans of baked eggs and sipping on Campos coffee.</p> 
 
    </div> 
 

 
</section>

Answer 1

你需要浮動。還剩下gojima以允許其他內容坐在旁邊。你也可能不需要float:right.article1。

#main { 
 
    clear: both; 
 
    width: 960px; 
 
    height: 350px; 
 
    background-color: #7EFFF7; 
 
} 
 

 
.gojima { 
 
    float: left; 
 
} 
 

 
.article1 { 
 
    float: right; 
 
    display: inline-block; 
 
    background: -moz-linear-gradient(top, #77ebcf 20%, #ffffff 20%); 
 
    /* FF3.6-15 */ 
 
    position: relative; 
 
    border-top-style: solid; 
 
    border-right-style: solid; 
 
    border-bottom-style: solid; 
 
    border-color: #e1e1e1; 
 
    height: 295px; 
 
    width: 650px; 
 
    margin-right: 0px; 
 
} 
 

 
.article1 h1 { 
 
    font-size: 30px; 
 
    text-align: center; 
 
    position: relative; 
 
    bottom: 15px; 
 
    font-family: 'Economica', sans-serif; 
 
} 
 

 
.article1 p { 
 
    font-size: 20px; 
 
    padding-left: 15px; 
 
    padding-top: 10px; 
 
    padding-right: 15px; 
 
    font-family: 'Playfair Display', serif; 
 
} 
 

 
#main2 { 
 
    clear: both; 
 
    width: 960px; 
 
    height: 350px; 
 
    background-color: #000; 
 
}

<section id="main"> 
 
    <div class="gojima"> 
 
    <a href="#"><img src="images/pic1.jpg" alt="hp1" width="300" height="300" /></a> 
 
    </div> 
 

 
    <div class="article1"> 
 
    <h1> THE RICE BURGER TREND</h1> 
 
    <p>Guess what? Burger nerds stuck in an unending "brioche vs milk bun" argument now have a new topic to battle: the bun-free burger. They can test out the merits of this trend at Gojima, Sydney's first rice burger bar, which opened at The Star.</p> 
 
    </div> 
 

 
</section> 
 

 

 
<section id="main2"> 
 
    <div class="mbassy"> 
 
    <a href="#"><img src="images/pic2.jpg" alt="hp2" width="300" height="300" /></a> 
 
    </div> 
 

 
    <div class="article2"> 
 
    <h2> THE LOCAL EMBASSY BOILER-ROOM</h2> 
 
    <p> On a bright corner of Wattle Street in Ultimo is a busy cafe, The Local Mbassy. Soft music from the ‘20s plays and locals enjoy the view across Wentworth Park, tucking into burgers, pancakes and pans of baked eggs and sipping on Campos coffee.</p> 
 
    </div> 
 

 
</section>

Answer 2

您所創建的盒子是不是你的課裏面出現的原因是因爲格「gojima」被隱式設置爲「顯示：塊」，儘管事實是你的避風港沒有改變這個div的風格。

解決您的問題，只是讓此編輯你的CSS文件：

.gojima { 
    display: inline-block; 
    } 

Answer 3

要透過側的圖片和文本塊的一面，你應該添加任何float: left; OR display: inline-block每個section的第一個孩子（.gojima, .mbassy），並應用相同的CSS的第二部分作爲第一部分的第二個孩子的第二個孩子（.article1, .article2）：

#main { 
 
    clear: both; 
 
    width: 960px; 
 
    height: 350px; 
 
    background-color: #7EFFF7; 
 
} 
 

 
.gojima, .mbassy { 
 
float: left; 
 
} 
 

 
.article1, .article2 { 
 
    float: right; 
 
    display: inline-block; 
 
    background: -moz-linear-gradient(top, #77ebcf 20%, #ffffff 20%); 
 
    /* FF3.6-15 */ 
 
    position: relative; 
 
    border-top-style: solid; 
 
    border-right-style: solid; 
 
    border-bottom-style: solid; 
 
    border-color: #e1e1e1; 
 
    height: 295px; 
 
    width: 650px; 
 
    margin-right: 0px; 
 
} 
 

 
.article1 h1 { 
 
    font-size: 30px; 
 
    text-align: center; 
 
    position: relative; 
 
    bottom: 15px; 
 
    font-family: 'Economica', sans-serif; 
 
} 
 

 
.article1 p { 
 
    font-size: 20px; 
 
    padding-left: 15px; 
 
    padding-top: 10px; 
 
    padding-right: 15px; 
 
    font-family: 'Playfair Display', serif; 
 
} 
 

 
#main2 { 
 
    clear: both; 
 
    width: 960px; 
 
    height: 350px; 
 
    background-color: #000; 
 
}

<section id="main"> 
 
    <div class="gojima"> 
 
    <a href="#"><img src="images/pic1.jpg" alt="hp1" width="300" height="300" /></a> 
 
    </div> 
 

 
    <div class="article1"> 
 
    <h1> THE RICE BURGER TREND</h1> 
 
    <p>Guess what? Burger nerds stuck in an unending "brioche vs milk bun" argument now have a new topic to battle: the bun-free burger. They can test out the merits of this trend at Gojima, Sydney's first rice burger bar, which opened at The Star.</p> 
 
    </div> 
 

 
</section> 
 

 

 
<section id="main2"> 
 
    <div class="mbassy"> 
 
    <a href="#"><img src="images/pic2.jpg" alt="hp2" width="300" height="300" /></a> 
 
    </div> 
 

 
    <div class="article2"> 
 
    <h2> THE LOCAL EMBASSY BOILER-ROOM</h2> 
 
    <p> On a bright corner of Wattle Street in Ultimo is a busy cafe, The Local Mbassy. Soft music from the ‘20s plays and locals enjoy the view across Wentworth Park, tucking into burgers, pancakes and pans of baked eggs and sipping on Campos coffee.</p> 
 
    </div> 
 

 
</section>