如何解决此任务?

时间:2019-12-19 18:26:55

标签: html css

我的示例输出图像:enter image description here

我尝试使用在我的代码下方解决此HTML和CSS

#in {
  position: relative;
  display: inline-block;
}

.inline {
  display: inline-block;
}

#align_image {
  height: 150px;
  width: 30px;
  border: 1px solid green;
}

#contact_image {
  margin-top: 70px;
}

#address_block {
  position: absolute;
  top: 0px;
  height: 100px;
  width: 300px;
  border: 1px solid blue;
}

.flag_image {
  clear: left;
  border: 1px solid blue;
}
<div id="in">
  <div id="align_image" class="inline">
    <img src="location.jpg" height="30px" width="30px">
    <img src="contact.png" height="30px" width="30px" id="contact_image">
  </div>

  <div id="address_block" class="inline">
    3/2 xxxx<br>yyyyyyy(po),zzzzzzzzzzz<br>Pincode-000000.
  </div>

  <div class="inline">
    <img src="flag.png" height="50px" width="50px" class="flag_image">
  </div>

</div>

我用于标志图像的div元素重叠到地址div元素下方。

我的上述代码输出:enter image description here 为什么标志div元素位于地址div元素下

0 个答案:

没有答案