Question

我遇到这种情况：

我希望那部分文字也占据了用红色圈出的区域。有可能的？图像和文本的代码是：

<div class="row">
<div class="col-md-6">
<b>In tutte le varianti ITT si attiva grazie ai 
Tag.</b> Questa dotazione consente al sistema di rilevare la presenza di 
personale all’interno dell'area di pericolo dell'impianto ed evitare 
tutti i tipi di collisioni possibili. Nello specifico i macchinari 
possono essere dotati di un Tablet touch-screen che fornisce informazioni 
relative alla posizione dell’ostacolo rilevato rispetto al mezzo e alla 
sua direzione di marcia. In più la rilevazione di tutte le informazioni 
relative agli individui che sono entrati in contatto con la safety cloud 
(o area di pericolo) potranno essere registrate e rielaborate per 
migliorare il livello di sicurezza del reparto produttivo.</div>
<div class="col-md-6">
<img src="images/stories/Prodotti/ITT_Interactive_Tracking_Tags/itt_safety_securi
  ty/ITT_Factory_simulation.jpg" alt="itt map safety security" />
</div>
</div>

代码中的图像是jpg，但我可以制作一个png透明图像。谢谢！

Answer 1

我不这么认为，但我认为如果您将<br>标记添加到下一行的文本中，它可能会起作用。但是如果图像是正方形，那么它可能不起作用，除非文本可以覆盖图像。

Answer 2

最简单的方法是将内容分成两个<div>s。底部<div>将溢出，因为它的宽度为>100%父级宽度。将图片z-index设置为低于z-index的{{1}}的值，文字将覆盖图片。

试试这个：

＆＃13;

overlapping div

＆＃13;

.topText
{
   position:relative;
   float:left;
   width:100%;
   margin:0;
   padding:0;
   color:#000;
   border:1px solid #09f;
}

.bottomText
{
   position:relative;
   float:left;
   width:150%;
   margin:0;
   padding:0;
   color:#000;
   border:1px solid #09f;
   overflow:visible;
   z-index:2;
}

div img
{
   z-index:1;
}

＆＃13;

Answer 3

如果不需要响应，您可以创建文本容器<br>并使用{{1}}来打破您想要的行。

Answer 4

我认为您正在寻找的是CSS形状，但它是not well supported。请查看this article有关如何使用它的信息，并this library将其用于其他浏览器。

图像的一部分html

4 个答案: