css - 2 つの div 内にコンテンツを正しい方法で並べて配置する方法は?

Question

ここに示すようにコンテンツを配置したいと思います。

HTML & CSS で2 つdivの が横に並んで表示されます。それを取得するために直観的ではない方法で 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;
}

デモ

Answer 2

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

詳細については、こちらfloatまたは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. それを行う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;
}