HTML CSS橫幅對齊

有人可以幫我解決爲什麼我的「desc」內容不正確的標題下我的標題？我發佈了我的CSS和HTML代碼。我也發佈了結果看起來如何的照片。HTML CSS橫幅對齊

#bannerBottom { 
 
    border: 5px #0087dd solid; 
 
    margin-top: 30px; 
 
    margin-bottom: 50px; 
 
} 
 

 
#bannerImg { 
 
    width: 150px; 
 
    margin-top: 7px; 
 
    margin-left: 10px; 
 
    display: inline-block; 
 
} 
 

 
#bannerContent { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin-left: 20px; 
 
} 
 

 
#bannerContent>span { 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    font-family: arial; 
 
    color: steelblue; 
 
    display: inline-block; 
 
} 
 

 
#desc { 
 
    font-family: arial; 
 
    display: inline-block; 
 
    margin-left: 190px; 
 
}

<div id="bannerBottom"> 
 
    <img id="bannerImg" src="http://www.placehold.it/100x100"> 
 
    <p id="bannerContent"> 
 
    <span>The Big 3 - HTML, CSS, JavaScript</span> 
 
    </p> 
 
    <p id="desc">While the server can process information in many different languages, the file that they serve to the client are always going to be some combination of HTML, CSS, and JavaScript!<br>Learn more about the Big 3 here!</p> 
 
</div>

來源

2017-05-25 hpaya

您可以浮動你的形象離開，而不是使其成爲一個inline-block的元素。另外也不需要將該段設爲內嵌塊。

#bannerBottom { 
 
    border: 5px #0087dd solid; 
 
    margin-top: 30px; 
 
    margin-bottom: 50px; 
 
} 
 

 
#bannerImg { 
 
    width: 150px; 
 
    margin-top: 7px; 
 
    margin-left: 10px; 
 
    float: left; 
 
} 
 

 
#bannerContent { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin-left: 20px; 
 
} 
 

 
#bannerContent>span { 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    font-family: arial; 
 
    color: steelblue; 
 
    display: inline-block; 
 
} 
 

 
#desc { 
 
    font-family: arial; 
 
    margin-left: 190px; 
 
}

<div id="bannerBottom"> 
 
    <img id="bannerImg" src="http://www.placehold.it/100x100"> 
 
    <p id="bannerContent"> 
 
    <span>The Big 3 - HTML, CSS, JavaScript</span> 
 
    </p> 
 
    <p id="desc">While the server can process information in many different languages, the file that they serve to the client are always going to be some combination of HTML, CSS, and JavaScript!<br>Learn more about the Big 3 here!</p> 
 
</div>

來源

2017-05-25 20:57:40 j08691

謝謝你這麼多，心動不如行動吧！ – hpaya

當然那是因爲你有：

#desc { 
    margin-left: 190px; 
}

...這意味着箱子是不是標題下的配件，所以它得到下面分流。無論哪種方式，浮動圖像左側，沒有餘裕。

來源

2017-05-25 21:00:38

不，他是這樣做的，試圖彌補圖像寬度，這並沒有解決問題。 –

快速回復...我只是讓你的輸入更清晰！剩餘邊緣意味着整個區塊......現在等待，我不確定。我認爲他應該補充浮動：留在圖像上，並刪除文本上的空白。 –

試試這個：

<div id="bannerBottom"> 

<div class="container-banner-img"> 
    <img id="bannerImg" src="http://www.placehold.it/100x100"> 
</div> 

<div class="container-banner-content"> 
<p id="bannerContent"> 
    <span>The Big 3 - HTML, CSS, JavaScript</span> 
    </p> 
    <p id="desc">While the server can process information in many different languages, the file that they serve to the client are always going to be some combination of HTML, CSS, and JavaScript!<br>Learn more about the Big 3 here! 

    </p> 
</div> 

</div>

CSS

#bannerBottom { 
    border: 5px #0087dd solid; 
    margin-top: 30px; 
    margin-bottom: 50px; 
} 

#bannerImg { 
    width: 150px; 
    margin-top: 7px; 
    margin-left: 10px; 
    display: inline-block; 
} 

#bannerContent { 
    display: inline-block; 
    vertical-align: top; 
    margin-left: 20px; 
} 

#bannerContent>span { 
    font-size: 20px; 
    font-weight: bold; 
    font-family: arial; 
    color: steelblue; 
    display: inline-block; 
} 

#desc { 
    font-family: arial; 
    display: inline-block; 
    margin-left: 190px; 
} 

.container-banner-img { 
    float: left; /* <- pay attention on this line */ 
    width:25%; 
    } 

    .container-banner-content{ 
    width: 70%; 
    } 
}

來源

2017-05-25 21:03:27 cesarsicas

如果你不想去flexbox路線，你可以浮動的圖像，並保持您的標題和描述塊級別。

我花了一些自由與標記和CSS選擇器，將它們從ID更改爲類和其他改進，以簡化一切。

.entry { 
 
    font-family: Arial, sans-serif; 
 
    border: 5px solid #0087dd; 
 
    margin: 30px 0; 
 
} 
 

 
.entry-img { 
 
    float: left; 
 
    max-width: 150px; 
 
    margin: 10px; 
 
} 
 

 
.entry-title { 
 
    font-size: 20px; 
 
    color: steelblue; 
 
} 
 

 
.entry-desc { 
 
    margin: 10px; 
 
}

<div class="entry"> 
 
    <img class="entry-img" src="http://www.placehold.it/100x100"> 
 
    <h2 class="entry-title">The Big 3 - HTML, CSS, JavaScript</h2> 
 
    <p class="entry-desc">While the server can process information in many different languages, the file that they serve to the client are always going to be some combination of HTML, CSS, and JavaScript!<br>Learn more about the Big 3 here!</p> 
 
</div>

來源

2017-05-25 21:04:30 hungerstar

HTML CSS橫幅對齊

回答

相關問題