Question

如何在这样的两个div之间添加图像＆＃34;电影我＆＃34;我的代码in this link 中的code pen？

<div class="row-fluid">
    <div class="col-sm-6 col-xs-6" style="background-color: red;height: 100%">
        <hello>
    </div>
    <div class="col-sm-6 col-xs-6" style="background-color: blue;height: 100%">
        <hello>
    </div>
</div>

Answer 1

使用flexbox（不确定这是否会破坏引导行为，但我认为不会）：

HTML：

 <div class="row-fluid">
  <div class="col-sm-6 col-xs-6" style="background-color: red;height: 100%">
    <hello>
  </div>

  <!--Example div could be an image-->
  <div class="image"></div>

  <div class="col-sm-6 col-xs-6" style="background-color: blue;height: 100%">
    <hello>
</div>

CSS：

.row-fluid { 
  height: 100%; 
  display : flex;
  align-items : center;
  justify-content :center;
}

.image {
  /*Relevant part for image div*/
  position : absolute;
  z-index: 100;

  /*Less relevant part for image div*/
  width : 50px; 
  height : 50px; 
  background-color:green; 
}

code pen

如何在两个div之间添加图像

1 个答案: