使浮动在右边的图像周围的文本对齐

时间:2018-11-19 21:23:13

标签: html css

我试图使图像显示在div的右上角,文本首先在图像的左侧,然后在图像结束时,文本应占据div的整个宽度。

这是当前输出:

enter image description here

这是html:

<div>
<img src="./images/gym.jpeg" class="pic2"/>
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
</div>

这是CSS:

.description {
    padding: 0% 2% 1% 2%;
}

.description p {
    font-size: 20px;
}

.pic2 {
    float: right;
}

我尝试了解决方法here,但是它们对我没有用,并提供与所示图像相同的输出

感谢您的帮助

1 个答案:

答案 0 :(得分:1)

要使这些单词到处都是易碎的,您需要具备什么条件。因此,word-break: break-all;

.description {
  padding: 0% 2% 1% 2%;
}

.description p {
  font-size: 20px;
}

.pic2 {
  float: right;
}

div {  /* new */
  word-break: break-all;
}
<div>
  <img src="https://placehold.it/400x150" class="pic2" />  slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL slasdfkasjhdfkjasdhfkjlasdhfkjlashdfkjlshdKL
</div>