Div没有正确地包裹内容（图像） - 包括边距，可能的浮动/引导问题

Posted 2023-02-03

如何围绕图像里面的div容器进行大小/包装呢？ float：right和margin-left：auto可能导致问题。

我正在努力通过在其内部的图像周围正确包装来获得div的大小。请看一下我在这里提到的例子：

Link to Example

（可能值得玩窗口大小以帮助解释我的问题）

我第一次练习Bootstrap。每侧的红色块是网格块1和12，蓝色和绿色部分填充剩余的10个。大的橙色矩形是响应图像，我希望在任何时候保持中心间隔20px。

使用Chrome的“Inspect Element”（或类似） - 如果您检查右侧的橙色矩形，并查看容器div（class =“container-img-r”） - 此div围绕着橙色图像完全是我想要的（尽管包括隐形边框）。但是我没有太多运气用左侧橙色图像的div容器获得相同的结果（它仍然填充蓝色的父元素）

我已经玩过浮动/边距/位置的不同选项，但似乎无法破解它。

这是我对相关内容的CSS：

.container-img-l 
    /* float:right; ??? Nothing I tried here seemed to make a difference */


.container-img-r 
    float:left;


.item-pos-l 
    margin-left:auto;
    border-right:10px solid transparent; /* Margins just collapsed when resizing window */
    height:323px;
    width:510px;


.item-pos-r 
    float:left;
    border-left:10px solid transparent;
    height:323px;
    width:510px;    

我想让div准确地环绕响应式图像的原因是我想在图像上叠加一些CSS内容，随着窗口/设备大小的变化自动缩放/重新定位（Click here，你会清楚地看到我希望实现这种响应式风格）。

也许与Bootstrap CSS发生了冲突，但我没有想法。

答案

您的第一个链接远不像您想要响应的html。在尝试修改您不熟悉的框架之前，最好学习响应和流畅（如果可能没有像素高度或宽度）css。此外，您的HTML中有错误 - 验证它以确保您已关闭所有元素。还要缩进并注释所有代码，避免使用内联样式。

但是：ぁzxswい

http://jsbin.com/wazanu/2/ - 编辑链接

CSS：

http://jsbin.com/wazanu/2/edit

HTML：

body background:#eee

.header padding:20px;

.portfolio-grid .col-sm-6 
    margin-bottom: 30px


.img-wrapper .title 
     text-align:center;


@media (min-width:768px)  
    .img-wrapper 
        position: relative;
        overflow: hidden;
    

    .img-wrapper img width:100%;

    .img-wrapper .title 
        position: absolute;
        text-align:left;
        bottom: -90px;
        padding: 0 20px 20px 20px;
        height: 150px;
        background: red;
        transition: all .5s ease-in-out;
    
    .img-wrapper .title h3 
        margin: 0;
        height: 60px;
        line-height: 60px;
    
    .img-wrapper:hover .title 
        bottom: 0