如何以正确的方式将内容放在两个div中并排浮动？

Question

我希望我的内容如下所示：

两个div内部的HTML＆amp;＆amp; CSS。我可以以一种不直观的方式使用一些CSS来实现它，但这是我不想遵循的做法。

我想知道编码的正确方法。它将消除学习HTML和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＆＃39; here或Google的更多信息。

Answer 3

有两种简单的方法可以做到这一点：

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;
}