html - 如何在文本旁边 float 图像，中间有间隙

Question

我正在尝试将我的 company_name div 排在我的 Logo div 旁边。我也想在两者之间打个比方。我知道两个 div 都需要有宽度并且需要向左浮动但是我不确定我是否需要一个 clear:both 或者我是否完全关闭。

这就是我想要的最终结果 http://imgur.com/YX0mb5m

HTML

   <header id="main_header">
       <div class="inside clearfix">
                <div id="flat">
                    <div id="logo"><a href=""><img src="img/relson_logo.png" alt="Relson Gracie Academia De Jiu Jitsu"></a></div>

                    <div id= "company_name"> <h1> Relson Gracie 
                        Jiu-Jitsu Athens </h1> <h2> 507 Richland Ave. Suite 202 Athens, Ohio 45701 (614) 976-9867 </h2>
                         </div>

                </div>
                    <nav id="desktop">
                        <ul id="desktop_ul">
                            <li><a href="">About Us</a></li>
                            <li><a href="">Classes</a></li>
                            <li><a href="">Products</a></li>
                            <li><a href="">Contact Us</a></li>

                        </ul>
                    </nav><!-- end of nav#global -->
                </div>
            </header><!-- end of header#main_header -->

CSS

#main_header    {

background:#4f63a6;
}

#company_name{
float: left;
margin-right: 70%;
width: auto;



}

#logo img  {

float: left;
margin-right: 25%;
max-width: 30%;
height: auto;

}


#company_name h1{
font-weight: 200;
color: #fff;
line-height: 1em;
font-weight: 100;
font-size: 20px;    
}

#company_name h2{
font-weight: 200;
color: #fff;
}

Answer 1

使用这个:

#logo{
float:left;
width:25%; /* adjust it */
margin-right:5%; /* adjust it */
}

#company_name{
float:left;
width:70%; /* adjust it */
}

.clearfix:after, #flat:after{
 display: table;
 clear: both;
 content: " ";
 }