Question

我不知道如何在其附近放置带有文字的图像，这将是响应式文字和图像。

从这个示例中可以看出，页脚位于图像的中间。所以我的主要问题是如何将图像和文本放在它附近（它们都响应），之后我可以写下面的内容;例如，纯文本或放置页脚（没有固定位置）。我只是个初学者，请不要生气。

Set

CSS

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
        integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZC..."
        crossorigin="anonymous">
    <link rel="stylesheet" href="reduit.css">
    <title>Hello, world!</title>
</head>
<body>
    <header id="main-header">
        <h1>Welcome to the Reduit beach website</h1>
    </header>
    <div class="left-half">
    </div>
    <div class="right-half">
        <article>
            <p>The world is full of beaches, but they are not all alike. In Amazing Beaches, students will read about beautiful beaches that have special features, such as pink sand or a shore covered in smooth glass pebbles. Gorgeous photographs illustrate the information in the text, and simple world maps show the location of each highlighted beach. Each small section is only one page long, and the sentence complexity is adjusted for emergent readers.</p>
            <a href="#" class="btn btn-primary" role="button">Read more</a>
        </article>
    </div>
    <div class="footer">
        <p>Footer</p>
    </div>
    <footer class="mainfooter">
        <p>foo</p>
    </footer>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    </body>
</html>


body {
    font-size:18px;
}

Answer 1

试试这个

body {
    font-size:18px;
}
#main-header {
    background-color: coral;
    color: #fff;
    text-align: center;
    padding-top: 20px;
}
article {
    width: 100%;
    padding: 20px;
}
/* .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(43, 40, 40);
    color: white;
    text-align: center;
    margin-top:20px;
} */
#mainfooter {
    background: #333;
    color: #fff;
    text-align: center;
    padding:20px;
    margin-top:40px;

}
.left-half {
    background:url('https://cdn.newsapi.com.au/image/v1/9fdbf585d17c95f7a31ccacdb6466af9') no-repeat;
    width: 50%;
    height: 60%;
    float: left;
    background-size:cover;


}
.right-half {
    background-color: coral;
    float: right;
    overflow: hidden;
    width: 50%;
    height: 60%;
    text-align: center;

  }

@media(max-width:470px){
   .right-half{
     width: 100%;
   }
   .left-half {
     width: 100%;
     }

}

    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

        <link rel="stylesheet" href="reduit.css">
        <title>Hello, world!</title>
      </head>
      <body>

            <header id="main-header">


                <h1>Welcome to the Reduit beach website</h1>

            </header>
            <div style="display: block;">

            <div class="left-half">


                </div>
                <div class="right-half">
                  <article>
                    <p>The world is full of beaches, but they are not all alike. In Amazing Beaches, students will read about beautiful beaches that have special features, such as pink sand or a shore covered in smooth glass pebbles. Gorgeous photographs illustrate the information in the text, and simple world maps show the location of each highlighted beach. Each small section is only one page long, and the sentence complexity is adjusted for emergent readers.</p>

                <a href="#" class="btn btn-primary" role="button">Read more</a>
                  </article>
                </div>
            </div>
            <div style="clear: both"></div>

                <footer class="mainfooter" style="padding: 200px;">
                    <p>foo</p>
                </footer>


        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
      </body>
    </html>

Answer 2

试试这个页脚。

<div class="footer">
 <p>Footer</p>
</div>

和这个CSS

.footer {

    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: red;
    color: white;
    text-align: center;

}

图像和文本对齐，页脚和文本问题

2 个答案: