Question

我有一个带有小横幅的网站，我想把它放进去。我正在使用HTML和Bootstrap（v4）CSS / JS包。在我的横幅中，我有三个不同的标题，一个是h1，下面两个是h7。这就是我的页面目前的样子：

这就是我想要它的样子，粗略地说：

白线只是为了能够看到每一行中的每一列。从第一张图片中，您可以看到包含图片的列正在推动其他两列。那么我如何才能使图片列跨度超过一行呢？

作为参考，这是我目前的标记：

<!DOCTYPE html>
<html>

<head>
  <title>Fenix Prime's</title>
  <link rel="stylesheet" type="text/css" href="styles/bootstrap/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="styles/style.css" />
</head>

<body>
  <div class="container-fluid bg-dark">
    <div class="container bg-dark">
      <div class="pl-3 pr-3 pt-3 pb-0 row bg-dark text-light">
        <div class="col-9 border">
          <h1>Fenix Prime</h1>
        </div>
        <div class="col-1 border offset-2">
          <img class="float-right" src="dp.png" />
        </div>
      </div>
      <div class="row pt-0 pb-0 pl-3 pr-3 bg-dark text-light">
        <div class="col-9 border">
          <h7>Vim dico aperiri deleniti in. Sint quaestio repudiandae quo et.</h7>
        </div>
      </div>
      <div class="row pt-0 pb-3 pl-3 pr-3 bg-dark text-light">
        <div class="col-9 border">
          <h7>An per amet everti senserit, cum te insolens oportere consequat.</h7>
        </div>
      </div>

      <hr/>

      <div class="p-3 row bg-dark text-light">
        <table class="table">
          <tbody>
            <tr>
              <th style="font-weight: bold;">Introduction.</th>
            </tr>
            <tr>
              <td> Lorem ipsum dolor sit amet, brute oratio eu qui, quem dolorum cotidieque eam an. Offendit philosophia ex eos, ius ut incorrupte disputationi. Eum affert soleat apeirian et, mei aperiam moderatius te. Oblique prodesset voluptatibus an quo,
                purto omnium consequuntur eu vel. Veritus maiestatis sit no, in vis rationibus ullamcorper, ignota labitur cu has.
                <br/> Clita timeam nominavi in his. Propriae vivendum similique ne est, pri omnes dolore ei.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</body>

</html>

Answer 1

您可以将<H7>标题移至<h1>下方，以便将它们合在一起div。

Answer 2

你想要的只是通过嵌套来实现，即你正在为h1元素的列内的h7元素嵌套行列对，如下所示：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid bg-dark">
    <div class="container bg-dark">
        <div class="pl-3 pr-3 pt-3 pb-0 row bg-dark text-light">
            <div class="col-9 border">
                <h1>Fenix Prime</h1>
                <div class="row pt-0 pb-0 pl-3 pr-3 bg-dark text-light">
                    <div class="col-9 border">
                        <h7>Vim dico aperiri deleniti in. Sint quaestio repudiandae quo et.</h7>
                    </div>
                </div>
                <div class="row pt-0 pb-3 pl-3 pr-3 bg-dark text-light">
                    <div class="col-9 border">
                        <h7>An per amet everti senserit, cum te insolens oportere consequat.</h7>
                    </div>
                </div>
            </div>
            <div class="col-1 border offset-2">
                <img class="float-right img-fluid2" src="https://placehold.it/120" />
            </div>
        </div>
        
        <hr/>

        <div class="p-3 row bg-dark text-light">
            <table class="table">
                <tbody>
                    <tr>
                        <th style="font-weight: bold;">Introduction.</th>
                    </tr>
                    <tr>
                        <td> Lorem ipsum dolor sit amet, brute oratio eu qui, quem dolorum cotidieque eam an. Offendit philosophia ex eos, ius ut incorrupte disputationi. Eum affert soleat apeirian et, mei aperiam moderatius te. Oblique prodesset voluptatibus an quo,
                            purto omnium consequuntur eu vel. Veritus maiestatis sit no, in vis rationibus ullamcorper, ignota labitur cu has.
                            <br/> Clita timeam nominavi in his. Propriae vivendum similique ne est, pri omnes dolore ei.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

＆＃13;

Answer 3

更改

的位置

<div class="col-9 border">
     <h1>Fenix Prime</h1>
</div>

和

 <div class="col-1 border offset-2">
      <img class="float-right" src="dp.png" />
    </div>

将style="float:right"添加到包含图片的div

<div class="container-fluid bg-dark">
        <div class="container bg-dark">
            <div class="pl-3 pr-3 pt-3 pb-0 row bg-dark text-light">
                <div style="float:right" class="col-1 border offset-2">
                    <img src="http://www.csuchico.edu/~nwylde/250/symbolsnet/images-3.jpg" />
                </div>
                <div class="col-9 border">
                    <h1>Fenix Prime</h1>
                </div>
            </div>
            <div class="row pt-0 pb-0 pl-3 pr-3 bg-dark text-light">
                <div class="col-9 border">
                    <h7>Vim dico aperiri deleniti in. Sint quaestio repudiandae quo et.</h7>
                </div>
            </div>
            <div class="row pt-0 pb-3 pl-3 pr-3 bg-dark text-light">
                <div class="col-9 border">
                    <h7>An per amet everti senserit, cum te insolens oportere consequat.</h7>
                </div>
            </div>

            <hr/>

            <div class="p-3 row bg-dark text-light">
                <table class="table">
                    <tbody>
                        <tr>
                            <th style="font-weight: bold;">Introduction.</th>
                        </tr>
                        <tr>
                            <td> Lorem ipsum dolor sit amet, brute oratio eu qui, quem dolorum cotidieque eam an. Offendit philosophia
                                ex eos, ius ut incorrupte disputationi. Eum affert soleat apeirian et, mei aperiam moderatius
                                te. Oblique prodesset voluptatibus an quo, purto omnium consequuntur eu vel. Veritus maiestatis
                                sit no, in vis rationibus ullamcorper, ignota labitur cu has.
                                <br/> Clita timeam nominavi in his. Propriae vivendum similique ne est, pri omnes dolore ei.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

使用Bootstrap v4跨越多行跨列

3 个答案: