Question

我想要在页面底部放置三张背景图片，它们是三个拼凑在一起的图片。因此必须将其放在左下角，一个放在中间，一个放在右边。但遗憾的是，我似乎无法将它们安装到位，我已经在该页面上有内容，因此我很难将这些背景放到位。关于如何有效地做到这一点的任何建议？

HTML

＆＃13;

html {
    height: 100%;
    width: 100%;
    background-color: #fdb03c;
}

.cardbox {
    border-radius: 5px;
    padding: 20px;
  @media only screen and (min-width: 480px) {
    .cardbox {
      margin-bottom: 16px; } }
  @media only screen and (min-width: 992px) {
    .cardbox {
      margin-bottom: 24px; } }
   }

    .cardinputs input[type=text] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
}

    .cardinputs input[type=email] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
}

＆＃13;

<html>
    <head>
        <title>
            Formulier
        </title>
        <link rel="stylesheet" href="css/cece.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQU7qWa3PGgsj2p86DkfcxAJoCyiukqnA&v=3.exp&sensor=false&libraries=places"></script>
    </head>
    <body>
        <div>
        <form class="cardinputs" method="post">
            <div class="cardbox">
                <table>
                    <th>
                        Gegevens:
                    </th>
                    <tr>
                        <td>
                            <label for="BTW">BTW Nummer:</label>
                        </td>
                        <td>
                            <input type="text" id="BTW" name="BTWnummer" maxlength="11" required autofocus>
                        </td>
                        <td id="company">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="contactpersoon">Contactpersoon:</label>
                        </td>
                        <td>
                            <input type="text" id="contactpersoon" name="contactpersoon" required>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="functie">Functie:</label>
                        </td>
                        <td>
                            <input type="text" id="functie" name="functie" required>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="email">E-mailadres:</label>
                        </td>
                        <td>
                            <input type="email" id="email" name="email" required>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="telefoonnummer">Telefoonnummer:</label>
                        </td>
                        <td>
                            <input type="text" id="telefoonnummer" name="telefoonnummer" required>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="submit" id="formsubmit" name="submitformulier" disabled></td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
    </body>
    <script src="js/javascript.js?t=<?php time(); ?>"></script>
</html>

＆＃13;

提前谢谢。

Answer 1

尝试使用以下样式将它们全部包装在内联div中：显示：弯曲 flex-direction：row

<div>
       <imgLeft>
       <imgCenter>
       <imgLast>
</div>

应该这样做。

Answer 2

尝试使用bootstrap网格系统，这样你就可以将它们排成一行，并将该行分成3列：小演示：

 <div class="row">
<div class="col-md-4"> image 1 here </div>
<div class="col-md-4"> image 2 here </div>
<div class="col-md-4"> image 3 here </div>
</div>

通过这种方式，您可以将每个图像从页面的12列中删除4列，它们将自动定位在左中 - 右侧。

Answer 3

首先：我会为他们使用一个容器，为了良好的实践，并且实施例：

  <div>
    <Element-with-image>
    <Element-with-image>
    <Element-with-image>
  </div>

然后我将它们全部浮动，或者使用display：inline-block。

div element-with-image{
  float: left;
}

or

div element-with-image{
  display: inline-block;
  width: 33.33%
}

然后我会给他们每个33.333的百分比，所以他们在页面上平均分配。如果您希望它们一直位于底部，只需确保整个HTML代码块位于页面的最底部。

我希望有帮助

CSS如何在底部放置三个背景

3 个答案: