Question

HTML：

<div class="col-lg-4">    
    <div class="outer-div"></div>    
    <div id="cropContainerMinimal1"></div>      
</div>

CSS：

.outer-div {
    padding-top: 75px;    
    padding-right: 72px;    
    padding-left: 69px;    
    padding-bottom: 92px;    
    background-image: url(../images/student-background.png);    
    background-repeat: no-repeat;    
    background-position: center center;    
    height:590px;
}

#cropContainerMinimal1 {
    width:100%;
    height:421px;
    position: relative;
    border:1px solid #ccc;
}

CSS对我不起作用。如果我玩absolute它会摧毁所有结构。如何解决这个问题？

Answer 1

将outer-div移到#cropContainerMinimal1内并应用以下css。您可以使用top，right，bottom和left属性来根据您的需要进行制作。

.outer-div {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    bottom: 10px;
    right: 10px;
    left: 10px;
    top: 10px;
}

#cropContainerMinimal1 {
    background: #ccc;
    width: 100%;
    height: 421px;
    position: relative;
    border:1px solid #ccc;
}

<div class="col-lg-4">
  <div id="cropContainerMinimal1">
    <div class="outer-div"></div>
  </div>
</div>

想把div带到div bootstrap上

1 个答案: