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

Question

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

在 HTML 和 CSS 中两个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

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

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