Question

我试图在图片的右侧放置文字。我需要文本来打破＆＃34;打破＆＃34;没有在图像下面。

＆＃34;休息＆＃34;在文中是故意限制宽度的结果。

我已经制作了JSFiddle of what I'm trying to do，但它已被打破。一些文本位于图像的右侧，这是正确的，其余文本位于图像下方，这是不正确的。

我该怎么做才能解决这个问题？我可以自由地使用大多数标记或样式;我并不局限于我的示例中的set [environment_varible]=元素。

Answer 1

我已经为你修改了代码。我希望它有所帮助。

<body style="width: 280px">

<img style="float: left;margin-right:20px;" src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div style="word-wrap:break-word">Jonathan-Paul Montgomery-Benson</div>

</body>

更好的编码方式是避免内联样式。这是以下代码段：

body {
      width: 280px;
  }
  img {
      float: left;
      margin-right: 20px;
  }
  .break {
      word-wrap: break-word;
  }

<body>

<img src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div class="break">Jonathan-Paul Montgomery-Benson</div>

</body>

Answer 2

我在标记方面做了一些更改。希望这会有所帮助。

.block {
  display: flex;
  width: 280px;
}

img {
  max-width: 100%;
}

<body>
  <div class="block"><img src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
    <div>Jonathan-Paul Montgomery-Benson</div>
  </div>
</body>

Answer 3

您可以使用以下标记来实现此目的。

＆＃13;

.row{width:280px;}
.row:after{clear:both; content:""; display:block;}
.img-col{width:40%; float:left;}
.img-col img{width:100%; height:auto;}
.des-col{width:57%; float:right;}

＆＃13;

<div class="row">
  <div class="img-col">
    <img  src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
  </div>
  
  <div class="des-col">Jonathan-Paul Montgomery-Benson</div>

</div>

＆＃13;

您可以设置＆＃34; .img-col＆＃34;宽度根据您的设计。

Answer 4

我这样做了。希望这有帮助。

＆＃13;

.class-txt{
  display: inline;
    word-wrap: break-word;
    width: 60%;
    position: relative;
    
    float: left;
}
.img-class{
  width : 40%;
  float:left;
}

＆＃13;

<body style="width: 280px">

<img class='img-class'  src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div class="class-txt" style="display:inline; word-wrap: break-word;">Jonathan-Paul Montgomery-Bensononathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson</div>

</body>

＆＃13;

Answer 5

尝试使用display:flex; css样式属性

<body style="width: 280px">

<img style="float: left;margin-right:20px;" src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div style="display:flex;">Jonathan-Paul Montgomery-Benson Jonathan-Paul Montgomery-Benson </div>

</body>

Answer 6

<body>
 <div style="display:inline-flex; word-wrap: break-word;">
    <img style="float: left;" src="https://v.cdn.vine.co/r/avatars  /23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
 <div>Jonathan-Paul Montgomery-Benson</div>
</div>
</body>

带图像的文本内联断字

6 个答案: