korrekt ausrichten Divs - HTML/CSS

Question

#left { 
 
    float: left; 
 
    width: 15%; 
 
    overflow: hidden; 
 
} 
 

 
#right { 
 
    float: left; 
 
    width: 60%; 
 
    overflow: hidden; 
 
} 
 

 
#cen { 
 
    display: inline-block; 
 
    width: 5%; 
 
    overflow: hidden; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    text-align: center; 
 
}

<div id="container"> 
 
    <h1> 
 
    <div align="center" id="cen">+</div> 
 
    </h1> 
 
    <h1> 
 
    <div align="center" class="Area" id="left">1</div> 
 
    </h1> 
 
    <h1> 
 
    <div align="center" class="Phone" id="right">650000</div> 
 
    </h1><br> 
 
</div>

Der graue Bereich ist mein Container DIV Das Top ist, was ich habe Der Boden ist das, was ich will.

Nichts, was ich tue, stimmt sie korrekt ab oder drückt ein Div in die nächste Zeile. Es ist so frustrierend, ich bin über meinen Computer zu zerschlagen

Answer 1

Warum nicht einfach Spanne und einen gewissen Spielraum nutzen:

h1 { 
 
text-align:center; 
 
} 
 
span { 
 
margin:10px; 
 
}

<h1><span>+</span><span>1</span><span>650000000</span></h1>

Sie dann individuelle Spanne, indem Sie einige Klasse ändern können