Question

我正在尝试找到一种方法来使用img来模拟背景：覆盖属性但不使用对象适合，因为在某些浏览器中不支持。

另外，我正在尝试在此图像周围包装文本并在其上方创建一个块。

问题是文本在块和图像之间创建了一个边距，我不希望这样。有人知道解决它的方法吗？

html：

<div class="container">
  <div class="image">
    <img src="">
  </div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<div class="image-box"></div>

css：

.container{
    width:700px;
}

.image{
    position: relative;
    float: left;
    margin-right: 20px;     
}

.image img{
    float:left;
    width: 300px;
    height: 225px;
    object-fit: cover;
    position: relative;
}

.container p{
    font-size:20px;
    overflow: hidden;
    text-align: justify;
    margin-bottom: 32px;
}

.image-box{
    height:50px;
    width: 300px;
    line-height: 2.3em;
    font-weight: 700;
    background: #D8DFE3;
    text-align: center; 
}

这是一个小提琴：

http://jsfiddle.net/0hspa3wh/2/

Answer 1

非常使用display: inline-block;和divs

的html结构

＆＃13;

.container{
    width:700px;
    border: 1px solid blue;
}

.left{
    margin-right: 20px;
    display: inline-block;
    vertical-align: top;
}

.image img{
    width: 300px;
    height: 225px;
    object-fit: cover;
    position: relative;
}

.container .text{
    font-size:20px;
    width: 370px;
    text-align: justify;
    display: inline-block;
    vertical-align: top;
}

.image-box{
    height:50px;
    width: 300px;
    line-height: 2.3em;
    font-weight: 700;
    background: #D8DFE3;
    text-align: center; 
    display: inline-block;
}

＆＃13;

<div class="container">
    <div class="left">
        <div class="image">
            <img src=""/>
        </div>
        <div class="image-box">This block shouldnt have this margin up</div>
    </div>
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>    

</div>

＆＃13;

Answer 2

通过在CSS中使用网格，如果我很清楚你想要的东西，你可以做到：

<div class="row">
    <div class="col-md-6">
      <div class="image">
        <img src="">
      </div>
      <div class="image-box">This block shouldnt have this margin up</div>
    </div>
    <div class="col-md-6">
        <p>
        Your text
        </p>
    </div>
 </div>

以下是JSfiddle的更新：http://jsfiddle.net/0hspa3wh/3/

在图像和div上包装文本

2 个答案: