Question

我正在尝试使用CSS将两个元素彼此相邻放置。一个元素在我向左浮动的位置上具有left类，另一个元素在我想放置在left元素的右侧上的一个right类。我正在尝试使其看起来像this图像。我的完整代码可以在this codepen上看到。谢谢。

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。

Answer 2

为什么要使用向左浮动和向右浮动。 U都可以使用向左浮动。如果有足够的空间，它们会彼此对齐。

在这个项目中，我认为flexbox将是一个更好的解决方案（内容部分和侧面菜单）。它将为您节省很多高度和响应速度方面的问题。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何使用CSS将元素彼此相邻放置

2 个答案: