Question

我使用Bootstrap制作的一些卡片有问题。这是代码：

formacion {
    color: white;
    position: relative;
}

.formacion .puesto {
    position: relative;
    z-index: 1;
}

.formacion .puesto img{
    margin-top: 10px;
}

.formacion .empresa {
    width: 100%;
    position: absolute;
    top: 52px;
    background: rgb(255, 255, 255);
    color: #000;
    z-index: 0;
}

<div class="col-md-4 col-sm-4">
<h2>Formación<br><small>Experiencias académicas destacadas</small></h2>
<div class="col-md-12 capsula-formacion">
    <div class="formacion row" style="background-color: #8224e3">
        <div class="col-sm-3 col-md-3 puesto">
            <img src="http://jdlcgarcia.es/wp-content/uploads/2016/10/Captura-de-pantalla-2016-10-17-a-las-14.50.26-150x150.png" alt=" @ " title=" @ " class="img-circle img-responsive center-block">
        </div>
        <div class="col-sm-9">
            <h3 class="text-center">Ingeniero en informatica</h3>
        </div>


        <div class="col-sm-9 empresa" style="background-color: #e688ff">
            <h4 class="text-center col-sm-offset-3">Universidad<br><small></small></h4>
            <div class="row-fluid text-center col-sm-offset-3">
                01-09-2004 - 01-04-2011 linea1
                <br> linea2
                <br> linea3
                <br>
            </div>
            <div class="row-fluid">
            </div>
        </div>
    </div>
</div>
<div class="col-md-12 capsula-formacion">
    <div class="formacion row" style="background-color: #81d742">
        <div class="col-sm-3 col-md-3 puesto">
            <img src="http://jdlcgarcia.es/wp-content/uploads/2016/10/Captura-de-pantalla-2016-10-17-a-las-15.41.22-150x150.png" alt=" @ " title=" @ " class="img-circle img-responsive center-block">
        </div>
        <div class="col-sm-9">
            <h3 class="text-center">Curso 1</h3>
        </div>


        <div class="col-sm-9 empresa" style="background-color: #e5ffa6">
            <h4 class="text-center col-sm-offset-3">La institución<br><small></small></h4>
            <div class="row-fluid text-center col-sm-offset-3">
                01-10-2016 - 31-10-2016 linea1
                <br> linea2
                <br> linea3
                <br>
            </div>
            <div class="row-fluid">
            </div>
        </div>
    </div>
</div>

此代码使我的div看起来像这样：

当他们必须这样显示时（通过向.capsula-formacion添加一个固定高度来实现，但我不想这样做，因为某些div可能比其他div更长）：

当我使用绝对定位时，我总是遇到同样的问题所以我假设我做错了。哪种方式可以实现我想要的布局？提前谢谢!!

Answer 1

不要在内容div中放置绝对位置。您可以按绝对位置管理图像。

您可以按负位置设置图像，也可以设置图像宽度和高度。

在响应式视图中，您可以按断点（媒体查询css）管理图像宽度和高度。

由于位置绝对和0高

1 个答案: