我正试图将我的company_namediv排列在我的徽标div旁边。我知道两个div都需要有宽度,需要向左浮动,但我不确定我是否需要一个clear:两者都需要,或者我只是完全偏离。
这就是我想要的最终结果https://i.stack.imgur.com/oHG02.jpg
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;
}
使用这个:
#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: " ";
}