如何以正確的方式將內容放在兩個div浮動的並排內？

Question

我想我的內容被放在如下所示：

內的兩個div的HTML中的CSS &浮動並排側。我可以以一種不直觀的方式使用一些CSS來獲得，但這是我不想遵循的練習。

我想知道正確的方式來編碼。它將消除學習HTML & CSS的主要障礙。

Answer 1

HTML

<div class="left"> 
    <h1>jk</h1> 
</div> 

<div class="right"> 
    <ul> 
     <li><a href="#">home</a></li> 
     <li><a href="#">sample</a></li> 
     <li><a href="#">sample</a></li> 
     <li><a href="#">sample</a></li> 
     <li><a href="#">sample</a></li> 
    </ul> 
    <a class="logIn" href="#">log in</a> 

</div> 

CSS

.left{ 
    float:left; 
    background-color:#898989; 
    width:30%; 
} 
.left h1 { 
    font-size:20px; 
    float:right; 
    padding:1px 5px; 
    color:#fff; 
} 
.right { 
    float:right; 
    background-color:#222; 
    width:70%; 

} 
.right ul {float:left; } 
.right ul li { 
    float:left; 
    list-style-type:none; 
    color:#fff; 
    padding:0 5px; 
} 
.right ul li a { 
    color:#fff; 
    text-decoration:none;  
} 
.logIn { 
    float:right; 
    margin:8px 5px 0 0; 
    text-decoration:none; 
    background-color:#3c3c3c; 
    padding:5px; 
} 

DEMO

Answer 2

<div style="float:left">Hello</div> 
<div style="float:right">world!</div> 

更多關於float的here，或上Google。

Answer 3

有2種簡單的方法可以做到這一點：

1. 創建2名的div和浮動它們分別向左：

   <div style="width: 300px; float: left;">Div 1</div>

   <div style="width: 300px; float: left;">Div 2</div>

2. 做第二個方法它是：

HTML：

<div id="wrapper"> 
    <div id="left">First Div</div> 
    <div id="right">Second Div</div> 
</div> 

CSS：

#wrapper { 
    width: 960px; 
    display: inline-block; 
} 

#wrapper #left { 
    width: 480px; 
    float: left; 
} 

#wrapper #right { 
    width: 480px; 
    float: right; 
}