css - 如何使用 CSS 将元素并排放置

Question

我正在尝试使用 CSS 将两个元素并排放置。一个元素具有 left 类，我向左浮动，另一个元素具有 right 类，我想将其放置在左侧元素的右侧。我试图让它看起来像 this图像。我的完整代码可以在this看到代码笔。谢谢。

CSS

body {
    margin: 2%;
}

header {
    background-color: #606060;
    text-align: center;
    padding-bottom: 15px;
}

h1 {
    text-align: center;
    color: #FFFFFF;
}

aside {
    background-color: #ffcc80;
}

aside img {
    width: 150px;
    margin: 20px;
    display: block;
}

.left {
    float: left;
}

.right {
    background-color: #E0E0E0;
    float: right;
}

a {
    color: #000000;
}

.right a {
    color: #0000FF;
}

nav {

}

nav a {
    display: inline-block;
    text-decoration: none;
    width: 22%;
    background-color: rgba(255, 255, 255, .5);
    padding: 10px;
}

.active {
    background-color: #FFFFFF;
}

HTML

<aside class = "left">
            <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/></a>

            <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/></a>

            <a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg"  alt="Ultimate Frisbee"></a>
        </aside>
<section class = "right">
                <h2>Watch your Head </h2>
            <p>Ultimate Frisbee is a sport that I never played myself, but it's popularity is something hard to ignore in many Midwestern college towns.  Students (and people who wish they were still students) spend the few briefs months of good weather, sprinting down fields, hurling frisbees, and yelling "Stack!!".</p>
            <p>What I find much more entertaining is the large number of people who continue to play when the weather gets windy and the night sky darkens around oh....4:15pm.  The sight of frisbees boomeranging in the wind is topped only by the knowledge that even when you can't seem, those same plastic discs of death are probably hurtling through the dark night sky at 8 or 9 o'clock in the evening.
            </p>
            <p>Ultimate Frisbee requires a great deal of stamina and dexterity.  Not surprisingly, the <abbr title = "International Olympic Committee">IOC</abbr> officially recognized Ultimate as a sport in 2015.   It can go up against other sports for inclusion in  Olympic games.</p>
    </section>

Answer 1

尝试 display: inline-block 应该可以工作。