Question

我在我的网站上有一个主要文章部分，我有一个img，右边是img的描述。单词到达容器结束后，如果应该打破行并再次启动img之后。但我的话是在形象背后！这是一个可以帮助您理解的小提琴：JSFiddle。我怎么能让这些话突破界限并在img之后重新开始？是否可以像我一样在同一个容器中执行此操作？我给出了这样的容器大小：

div{
    margin-left:2.7vw;
    background:black;
    padding:10px;
    width:50vw;
    height:49vw;
    word-wrap:break-word;
}

这样的img / words：

div img{
    margin-left:-10vw;
    position:absolute;
    height:40vh;
    width:25vw;
}

div figcaption{
    color:white;
}

这一切似乎都在小提琴中。谢谢您的帮助！感谢。

Answer 1

将float属性添加到您的img。

示例：float:left;

AND：删除绝对定位。

div{
margin-left:2.7vw;
background:black;
padding:10px;
width:50vw;
height:49vw;
word-wrap:break-word;
   }

 div input{
display:none;
          }

div img{
margin-left:-10vw;
position:absolute; <--- REMOVE THIS RIGHT HERE
float:left;
height:40vh;
width:25vw;
          }

div figcaption{
color:white;
          }

Answer 2

您已将图片置于“绝对”状态。在图片上使用float:left并移除position:absolute属性。

https://jsfiddle.net/pa8qq9Lh/

Answer 3

你需要浮动图像，但是向左而不是向右移动，并删除绝对定位：

div img {
    margin-left:-10vw;
    /*position:absolute; <-- remove this */ 
    float:left; /* <-- add this */
    height:40vh;
    width:25vw;
}

JSFiddle

在突破行

3 个答案: