Question

试图理解为什么我的元素似乎被放置在上一节的顶部（导航栏的正下方），而不是放在新部分的下方。我试图了解有关在CSS中定位的更多信息，这可能就是它的原因，或者仅仅是我的HTML中的错误（但我似乎找不到它）。我希望有人能快速了解一下为什么。

示例：

标题图片

导航栏

（放错位置的报价在这里而不是底部）

部分

新部分（我要在哪里报价）

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- <link rel="stylesheet" type="text/css" href="css/resets-copy.css"> -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <link href="css/animate.css" rel="stylesheet"/>
    <link href="css/waypoints.css" rel="stylesheet"/>
    <script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
    <script src="js/waypoints.js" type="text/javascript"></script>
    <!-- <script src="script.js" type="text/javascript"></script> -->
    <title>Drifting</title>

</head>

<body>
    <section class="intro">
        <div class="inner">
            <div class="content">
                <section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0s">
                <h1>drifting</h1>
                </section>
                    <!-- <section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay=".1s">
                <a class="btn" href="#">Get Started</a>
                </section> -->
            </div>
        </div>
    </section>
    <header id="myHeader">
        <div class="logo" id="myMenu">
        drifting in the fall
        </div>
        <div class="menu">
            <a href="#">home</a>
            <a href="#">about</a>
            <a href="#">journal</a>
            <a href="#">contact</a>
        </div>
    </header>

    <br>

<div class="container">
        <div class="left-side">
            <div class="info-container">
            <h1>text title<br>
            </h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, nemo quo rem, unde deleniti natus eligendi a temporibus mollitia vero tempora voluptatem adipisci Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nihil omnis, repudiandae explicabo natus nam earum quidem vero libero beatae rem iste quisquam. Cumque tempore magni officia, ipsa veritatis voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio doloremque modi natus sapiente, sed assumenda fuga esse, voluptates unde, dolorem vero dolore, quibusdam ex a placeat ducimus amet iusto numquam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur suscipit enim! Debitis, ad, nam. Quisquam ullam facilis, tempore nisi nemo enim provident, ab dicta iusto animi obcaecati incidunt sapiente. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur corporis aperiam voluptas excepturi laborum nobis, nam ipsa aliquid commodi voluptatum illum, temporibus, beatae enim et totam. Enim similique officiis voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita aut amet saepe, repellat beatae! Illum natus autem obcaecati a, corporis vero, itaque ratione enim dolore aut ducimus quod, qui ut.
            </p>
            </div>
        </div>
        <div class="right-side">
                <img src="IMG/GP1.jpg">
        </div>
</div>

<section>
    <div>
        <h2>A creative man is motivated 
by the desire to achieve, not by the desire 
to beat others - Ayn Rand
        </h2>
    </div>
</section>

</body>

</html>

CSS

@import url('https//fonts.googleapis.com/css?family=Raleway');
@import url('https//fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i|Open+Sans:300,400,600,700');
@import "resets.css";

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.intro {
    height: 100%;
    width: 100%;
    margin: auto;
    background: url('https://image.ibb.co/bF7T1L/site.jpg') no-repeat 50% 50%;
    display: table;
    top: 0;
    background-size: cover;
}

.intro .inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding-bottom: 3%;
}

.content h1 {
    font-family: 'Crimson';
    color: white;
    font-size: 600%;
    font-style: italic;
}

/*.btn {
    font-size: 150%;
    font-family: 'Crimson';
    text-decoration: none;
    border: 2px solid white;
    padding: 10px 20px;
    border-radius: 5px;
}

.btn:hover {
    color: lightblue;
    border: 2px solid lightblue;
}*/

header {
    padding: 10px 10px;
    /*background: lightblue;*/
}

header .logo {
    display: inline-block;
    float: left;
    font-size: 25px;
    font-weight: 600;
    font-style: italic;
    padding-left: 13px;
}

header .menu {
    display: inline-block;
    float: right;
    font-size: 25px;
    font-weight: 600;
    font-style: italic;

}

header .menu a {
    text-decoration: none;
    margin-left: 20px;
    color: inherit; 
    padding-right: 12px;
}


header:after {
    content: "";
    display: table;
    clear: both;
}

p {
    font-family: 'Crimson';
    text-align: justify;
    margin: 3%;
}

#myHeader {
    background: white;

}

.grand-prix {
    width: 400px;
    display: inline-block;
}

.gp-image {
    display: inline-block;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.container .left-side {
    width: 30%;
    display: inline-block;
    float: left;
}

.container .right-side {
    width: 60%;
    display: inline-block;
    float: right;
}

.container .right-side img {
    width: 70%;
}

.info-container {
    position: relative;
    top: 450px;
    left: 150px;
}

.info-container h1 {
    font-size: 45px;
    font-style: italic;
    left: 10px;
    position: relative;
    bottom: 25px;
}

.right-side img {
    position: relative;
    top: 290px;
    left: 130px;
}

.bottom h2 {
    color: grey;
}

Answer 1

如果我对问题的理解正确，那么您会遇到两个主要问题：

1）从CSS中的float: left删除.container .left-side。您不需要它，因为该容器已经在左侧。这也是导致报价跳到顶部的原因。

2）在.info-container中，您需要将top: 450px;大幅降低到top: 10px之类，以使.left-side容器中的文本不会与您引用的引号重叠想要在页面底部。

对于这两个，它应该看起来像这样：

.container .left-side {
    width: 30%;
    display: inline-block;
}

.info-container {
    position: relative;
    top: 10px;
    left: 150px;
}

上一节上方的新节

1 个答案: