如何在一个盒子中编码多个盒子并让它们彼此相邻而不使它们垂直？

Question

我正试图让它们彼此相邻，但是当我添加另一个盒子时，它会移到底部。我是html和css的新手，你会怎么做？如果您可以为我编写该部分并对其进行解释，我将非常感激。

图像： http://i61.tinypic.com/9lj0ox.png

<div id="leftside">
    <div id="portrait"></div>
    <div id="leftbox"><b>About Me</b><p>test</p></div>
    <style>
        #leftside {
        position: fixed;
        margin-left: 0px;
        top: 125px;
        width: 220px;
        height: 485px;
        padding: 20px;
        background: rgba(255,255,255,0.5);
        background-repeat: repeat;
        background-attachment: fixed;
        border: 1px solid #000;
        border-radius: 5px;
        }
        #portrait {
        margin-left: 0px;
        width: 200px;
        height: 200px;
        padding: 10px;
        background:  url(http://i861.photobucket.com/albums/ab179/treeskywind/profile/kidosmall2_zps57444730.png    );
        border: 1px solid #000;
        border-radius: 5px;
        color: #fff;
        font-family: Century Gothic;
        }
        #leftbox {
        height: 230px;
        width: 200px;
        margin-left: 0px;
        margin-top: 20px;
        background-color: #6855A7;
        color: #fff;
        border: 1px solid #000;
        border-radius: 5px;
        padding: 10px;
        font-family: Century Gothic;
        text-align: justified;
        overflow: auto;
        }
    </style>
</div>

<div id="rightside">
    <div id="box1"><b>Links</b></div>
    <div id="rightbox"><b>My Interests</b></div>
    <div id="box2">test</div>
    <style>
        #rightside {
        position: fixed;
        margin-left: 0px;
        top: 125px;
        width: 600px;
        height: 485px;
        padding: 20px;
        background: rgba(255,255,255,0.5);
        background-repeat: repeat;
        background-attachment: fixed;
        border: 1px solid #000;
        border-radius: 5px;
        margin-left: 280px;
        }
        #box1 {
        margin-left: 0px;
        width: 200px;
        height: 160px;
        padding: 10px;
        background: #6855A7;
        border: 1px solid #000;
        border-radius: 5px;
        color: #fff;
        font-family: Century Gothic;
        }
        #rightbox {
        height: 260px;
        width: 200px;
        margin-left: 0px;
        margin-top: 20px;
        background-color: #6855A7;
        color: #fff;
        border: 1px solid #000;
        border-radius: 5px;
        padding: 10px;
        font-family: Century Gothic;
        text-align: justified;
        overflow: auto;
        }
        #box2 {
        width: 200px;
        height: 160px;
        padding: 10px;
        background: #6855A7;
        border: 1px solid #000;
        border-radius: 5px;
        color: #fff;
        font-family: Century Gothic;
        margin-left: 250px;
        }
    </style>
</div>

Answer 1

你可以使用：

display: inline-block;

btw把你的页面放在你的页面上!!