Question

我有一个带有图片和一段文字的网页，我试图在垂直线上堆叠。我想添加display：block; to .about div将是这样做的合适方式。它给了我想要的垂直堆栈，但会影响页面的整体布局。起初我以为它是在页面上拉下标题部分，但是当我检查页面时，似乎这个命令实际上是将整个主体部分向下移动到页面上。不确定是什么导致了这一点。

<body>
    <header>
        <a href="index.html" id="logo"> <h1>
        <div id="header_title">
            Name
        </div></h1> </a>
        <div id="header_border"></div>
        <nav id="nav">
            <ul>
                <li>
                    <a href="index.html" class="selected" >About</a>
                </li>
                <li>
                    <a href="resume.html">Resume</a>
                </li>
                <li class="subNav">
                    <a>Portfolio</a>
                    <ul>
                        <li>
                            <a href="writing_samples.html">Writing Samples</a>
                        </li>
                        <li>
                            <a href="photoshop.html">Photoshop</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </nav>
    </header>

    <div class="wrapper">
        <div class="about_div">
            <img src="img/1935323_10153090821883239_4407778661294134622_n.jpg"  class="profile-photo">
        </div>
        <div class="about_div">
            <h3 id="about_me">About Me</h3>
            <p id="about_me_info">
                Text
            </p>
            <p id="about_me_info">
                More Text
            </p>
        </div>
        <div class="push"></div>
    </div>

    <div class="footer">
        <p>
            &copy; 2016 My Name.
        </p>
    </div>


</body>

和CSS：

body {
    font-family: 'Playfair Display', open sans;
    position: relative;
    height: 100%;
}

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding-top: 18%;
}

.about_div {
    display: block;
    margin-top: 50px;
}

.about_div img {
    margin-left: 125px;
}

.about_div h3 {
    margin-top: 50px;
    margin-right: 1%;
}

.about_div p {
    margin-right: 1%;
}

.profile-photo {
    max-width: 350px;
    border-radius: 100%; /* adds rounded corners to an element */
}

#about_me {
    font-size: 2em;
}

#about_me_info {
    font-size: 1.5em;
}

标题间距应如何显示（使用内联块）

应用display时块头间距实际看起来如何：块

请注意，这在技术上并不是标题的问题，而是在第二个例子中整个身体部分向下移动。

Answer 1

从＆＃39; .about_div＆＃39>中删除display:block并将display:flex添加到＆＃39; #wrapper＆＃39;

显示块移动整个身体部分

1 个答案: