css - Div 未正确环绕内容(图片)- 包括边距、可能的 float /Bootstrap 问题

Question

如何围绕 It 中的图像调整大小/包裹 div 容器？ float: right 和 margin-left: auto 可能会导致问题。

我正在努力通过正确环绕其中的图像来调整 div 的大小。请看一下我在这里提到的例子:

Link to Example

(可能值得尝试使用窗口大小来帮助解释我的问题)

我是第一次使用 Bootstrap 进行练习。每边的红色 block 是网格 block 1 和 12，蓝色和绿色部分填充剩余的 10 个。大的橙色矩形是响应式图像，我希望它们始终保持中心间隔 20 像素。

使用 Chrome 的“Inspect Element”(或类似的)- 如果您检查右侧的橙色矩形，并查看容器 div (class="container-img-r") - 这个 div 正在包装完全按照我想要的方式围绕橙色图像(尽管包括不可见的边框)。但是我没有太多运气用左侧橙色图像的 div 容器实现相同的结果(它仍然填充蓝色父元素)

我试过 float /边距/位置的不同选项，但似乎无法破解它。

这是相关内容的 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 有冲突，但我没有想法。

Answer 1

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

演示:http://jsbin.com/wazanu/2/

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

CSS:

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
    }
}

HTML:

<header class="header text-center">
   My header
</header>
<div class="container">
   <div class="row portfolio-grid">
      <div class="col-sm-6">
         <div class="img-wrapper">
            <img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
            <div class="title">
               <h3>Title of Project</h3>
               <p>Content about project goes here</p>
            </div>
         </div>
      </div>
      <!--/.col-sm-6 -->
      <div class="col-sm-6">
         <div class="img-wrapper">
            <img src="http://placebear.com/g/400/300" class="img-responsive center-block" alt="">
         </div>
      </div>
      <!--/.col-sm-6 -->
      <div class="clearfix visible-sm"></div>
      <div class="col-sm-6">
         <div class="img-wrapper">
            <img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
         </div>
      </div>
      <!--/.col-sm-6 -->
      <div class="col-sm-6">
         <div class="img-wrapper">
            <img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
         </div>
      </div>
      <!--/.col-sm-6 -->
   </div>
   <!--/.row-->
</div>
<!--/.container-->