Question

我正在努力做到这一点，以便将我的aside元素移到页面的侧面，<p>元素旁边（我希望我说得通）。有谁知道我该如何解决？

这是一张照片和我的代码：

what my page looks like

HTML：

<aside>
<h4>Beginner Friendly Videos</h4>
    <ul class="aside">
      <li>
      <li>
      <li>
    </ul>       
</aside>

CSS：

.aside {
    float: right;
    margin: 0, 1.5%;
    position: relative;
    color: black;
    width: 50%;
    display: block;
}

Answer 1

我建议在这里https://css-tricks.com/snippets/css/a-guide-to-flexbox/进入Flexbox。它将为您节省很多麻烦，因为它比Float更好地格式化。

话虽如此，我还是会按照以下内容推荐一些东西。

HTML

<body>
    <div id="wrapper">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed pellentesque turpis. Proin blandit, augue in euismod facilisis, lacus arcu bibendum purus, ut interdum libero dui in sapien. Suspendisse convallis imperdiet urna sed consequat.</p>
        </div>
        <aside>
            <ul>
                <li>1
                <li>2
                <l1>3
            </ul>
        </aside>
    </div>
</body>

CSS

#wrapper {
    display: flex;
    flex-direction: row;
}
aside {
   [Your Styles Here, No Float];
}

结果是，在您的p标签的右边。请注意，p在div内，因为它是一个内联元素。您并未提供所有代码，所以我无法为您提供确切的代码，但是，如果您调整嵌套div的宽度并放在一边，并实现这一点，它将对您有用！

如果要在左侧放置一面，请将其放在嵌套的div之前。

如何将我的Aside元素放在页面的一侧？

1 个答案: