显示：内联删除块

Question

I've been learning HTML and CSS for around 2 months, but apparently I'm still a neophyte. I'm trying to create somewhat of a header nav bar here, but when ever I set the property display:inline , poof ! They disappear. I'm pretty sure this problem is rudimentary but any input you have helps.

div { 
    border-radius: 5px 55px 5px 55px;
}

#Header {
    height: 50px; 
    width: 200px; 
    background-color: #f38630; 
    margin-bottom: 10px; 
    margin-top: 10px; 
    display: inline;
}

.Left {
    height: 300px; 
    width: 150px; 
    background-color: #A7DBD8; 
    float: left; 
    margin-bottom: 10px;
}

.Right {
    height: 300px; 
    width: 450px; 
    background-color: #E0E4CC;
    float: right; 
    margin-bottom: 10px;
}

#Footer {
    height: 50px;
    background-color: #69D2E7;
    clear: both;
}

Answer 1

In nutshell, you should not be using display: inline for anything that is not intended to be a displayed inside a block of text.

This is a good site for learning layout basics: http://learnlayout.com

If you really want to learn this stuff though, this is the best place I know: https://dash.generalassemb.ly :)

Hope that helps. Let me know if you don't feel I've answered your question.

Answer 2

我不会对div使用display：inline -block，而是将其应用于列表项或标签。

Answer 3

It has to do with the generation of containing blocks, whether or not your element is inline or block, also the type of positioning. An inline element without content will not show. Here is the de facto resource for your problem: de facto web standards

visual rendering