Question

父div .blog_content具有两个子元素，一个是p元素，另一个是图像。由于某种原因，它们的行为类似于块对象，而不是内联块。发生的事情是它们像块元素一样出现在彼此的顶部，而不像im试图完成的那样彼此出现。我为它们设置了宽度，但它们似乎只是忽略了它们。

请张贴以下代码。

相关的html 编辑以显示完整代码

<!doctype html>
<html>
    <head>
        <title>My blog</title>
        <link rel="stylesheet" href="styles/style.css"> 
    </head>
    <body>
        <nav>
            <div id="nav_links">
                <a href="#">Home</a>
                <a href="#">all posts</a>
                <a href="#">Services</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
            </div>
            <div id="nav_search">
                <form method="post" action="#">
                    <input id="nav_form_input" type="text" name="nav_search" placeholder="Search">
                    <input id="nav_search_submit" type="submit" value="GO">
                </form> 
            </div>
        </nav>
<main>
    <section>
        <article>
                <h1>My first blog post</h1>
                <hr>
                <div class="blog_content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                    <img src="images/159.jpg" alt="shit hot 159">
                </div>
            </article>
         </section>
        <aside>
        </aside>
    </main>
  </body>
</html>

相关的CSS

/* -------------------------------------------------------------------------------------------------------------------------------------*/
/* START OF HEADER.HTML STYLES */
/* -------------------------------------------------------------------------------------------------------------------------------------*/


nav {
    position: relative;
    height: 40px;
    width: 100%;
    background-color: rgb(40,50,60);
}

#nav_links {
    position: relative;
    float: left;
    padding-left: 40px;
    height: 40px;   

    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

#nav_search {
    position: relative;
    float: right;
    padding-right: 80px;
    height: 40px;

    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
}

nav > #nav_links > a {
    text-decoration: none;
    font-family: arial;
    font-size: 12px;
    color: rgb(220,220,220);
    padding-left: 25px;
    text-shadow: 0px 0px 1px grey;
    letter-spacing: 1px;
}

#nav_form_input{
    border-radius: 10px 0px 0px 10px;
    height: 20px;
    border: none;
    outline: none;
    color: rgb(220,220,220);
    background-color: rgb(60,70,80);
    padding: 5px;
}

#nav_search_submit {
    border-radius: 5px;
    height: 30px;
    border: 1px solid rgb(60,110,30);
    background: linear-gradient(rgb(100,160,80), rgb(90,140,60));
    font-family: arial;
    font-weight: bold;
    color: rgb(240,240,240);
}

/* -------------------------------------------------------------------------------------------------------------------------------------*/
/* START OF MAIN.HTML STYLES */
/* -------------------------------------------------------------------------------------------------------------------------------------*/

main {
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-flow: nowrap ;
    width: 100%;
    min-height: 600px;

    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: flex-start;
}

main section {
    margin: 20px auto;
    width: 65%;
    min-height: 400px;
}

main section article {
    border-radius: 30px 30px 0px 0px;
    background-color: rgb(240,240,240);
    height: 400px;
}


main section article h1 {
    margin: 0 auto;
    padding: 10px 0px 10px 20px;
    border-radius: 30px 20px 0px 0px;
    border: 2px 2px 0px 2px solid rgb(0,0,255);
    color: white;
    letter-spacing: 1px;
    background: linear-gradient(rgb(80,170,240), rgb(60,140,240));
    font-weight: 400;
}

hr {
    width: 95%;
    color: rgb(120,120,120);
}

.blog_content {
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
}


main section article p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;  
    width: 42%;
}

main section article img {
    margin: 3%;
    width: 42%;

    border-radius: 4px;
}

main aside {
    margin: 20px auto;
    width: 20%;
    min-height: 400px;
    border: 1px solid black;
}

我曾经尝试过同时使用flex和inline-flex，但是两者都不满意

flexbox父级遇到子元素的麻烦

0 个答案: