Question

我的任务是在Visual Studio中的Wikipedia页面上重新创建内容。我为介绍段落，内容框和侧边栏制作了单独的div。我无法使侧边栏浮动到简介文本的侧面-它浮动正确但停留在简介文本的下方。也许有一个简单的flexbox解决方案？有什么想法吗？

我尝试将内容框浮动到左侧，将侧边栏浮动到右侧，但是无法弄清楚如何向上移动侧边栏。

<body>
    <h1>Sara Bareilles</h1>
    <hr>
    <h4>From Wikipedia, the free encyclopedia</h4>
    <div class="content">
    <div class="intro">
        <p> <strong>Sara Beth Bareilles</strong> (/bəˈrɛlɪs/; born December 7, 1979)[1] is an American singer-songwriter and actress.</p>
        <p>Bareilles has sold over one million albums ...as a bestseller.[5]</p>
    </div>
    <div class="contentsBox">
        <div class="tocTitle"><strong>Contents</strong>[hide]</div>
        <ul class="contentsSection">
            <li> 
                <a href="#Life and career">
                <span class="contentsNum">1</span>
                <span class="contentsText">Life and career</span>
                </a>
            </li></ul>
 </div>
    <div class="sidebar" id="sidebar">
        <span class="sidebarTitle"><b>Sara Bareilles</b></span>
        <div class="photobox">
            <img class="photo" src="440px-Sara_Bareilles.jpg" alt="Sara Bareilles sitting at the piano and singing" width="200px">
            <p class="caption">Bareilles performing at the Troubadour in West Hollywood, California in October 2015</p>
        </div>
        <div class="infoItem">
            <span class="infoItemTitle"><b>Born</b></span>
            <span class="infoItemText">Sara Beth Bareilles</span>
        </div>

Answer 1

您的问题还不清楚，我对您的代码做了codepen，希望这就是您的意思。

https://codepen.io/mrenzodiaz/pen/oNvWPqN?editors=1010

如何格式化一个块元素和一个内联元素？

1 个答案: