Question

我有这样的HTML标记：

body {
    background-color: #476CDA;
}


div.bla {
      margin: 15px 10px;
      padding: 10px;
      background-color: #ffffff;
      box-shadow: 5px 5px 5px #000000;
}
div.bla img:first-of-type {   }

<html>
<body>
  <div class="bla">
    <h1>bla bla bla</h1>
    <p>again bla bla bla</p>
    <img src="http://goo.gl/Am3h3W" />
    <p>once more bla bla bla</p>
    <img src="http://goo.gl/ASwD62" />
  </div>
</body>
</html>

如果我希望将第一个img放在div.bla img:first-child标记之前，并将其作为h1中的封面照片（覆盖所有宽度），我应该在div中放入什么？那个division，没有保证金）

如果css定位不能达到目的，那么JavaScript也是可以接受的。

显然我不能改变HTML部分。

Answer 1

<html>
    <head>
        <style type="text/css">
            div.bla {
                margin: 15px 10px;
                padding: 10px;
                background-color: #ffffff;
                box-shadow: 5px 5px 5px #000000;
       }
            #img1 {
                width: 100%;
                height: 40%;
                margin: 0;
       }
        </style>
    </head>
    <body>
       <div class="bla">
            <img id="img1" src="bla.png" />
                <h1>bla bla bla</h1>
                <p>again bla bla bla</p>
                <p>once more bla bla bla</p>
                <img src="blabla.png" />
       </div>
    </body>
</html>

在div中重新定位图像

1 个答案: