在 div 中重新定位图像答案

【问题标题】：Repositioning image within div在 div 中重新定位图像
【发布时间】：2014-12-21 23:52:16
【问题描述】：

我有这样的 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 放在 h1 标记之前并在 div 中充当封面照片（覆盖 division 的所有宽度，不边距）

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

显然我无法更改 HTML 部分。

【问题讨论】：

你能重新排序html标签吗？？
我希望 HTML 部分会自动生成，因此第一张图片可以在许多 h1 p 和 a 标签之后，因此我无法编辑 html 部分。 @Vishal

标签： javascript html css image

【解决方案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>

【讨论】：