图像周围的HTML / CSS文本

问题描述

我有这个问题，我无法解决。基本上，我想这样做：

I have this problem that I can't solve. Basically, I want to do this: my problem

这是我将< img> 放入 p 标签的屏幕截图，但我对这个解决方案不满意。例如 - 如果我不知道段落中的行数并且仍然想要使图像居中，该怎么办...

This is a screenshot of me putting the <img> into the p tags, but I am not happy with that solution. For example - What if I don't know the number of lines in my paragraph and I still want to centre the image ...

我尝试在css中解决这个问题：

I tried solving this in css:

.container {display:flex; justify-content:flex-end}
.item {align-self: center}

这不起作用，因为容器也影响 p 元素...
那么为什么我不把img放到另一个div中呢？好吧，这也不起作用......

This doesn't work because the container is also affecting the p element ...So why don't I just put the img into another div? Well, this doesn't work either...

.img_container {display: flex; justify-content:flex-end; width:100%;}
.item {align-self: center;}

这不起作用，因为img_container的宽度也影响 p 而且如果我不使宽度：100％; 比div是无用的，img不会在我想要的那个右侧......

This doesn't work, because of the width of the img_container is affecting the p also and If I dont make the width:100%; than the div is useless and the img will not be at the right side as I wanted it to be ...

我发现了很多围绕图像包装文字的问题和答案指向我css对齐属性，但我使用html5，这对我不起作用。

I found a lot of "wrapping text around an image" questions and answers that are pointed me to css align property, but I am using html5 and this does not work for me.

我还想指出我不是来自一个英语国家，如果我不知道主题的确切名称，那么搜索主题对我来说很难。因此，如果有一个基于这个主题的装扮的东西，请指出我的方向，我会很乐意阅读它。

I also want to point out that I am not from an English speaking country so searching for topics is hard for me if I don't know the exact name of the topic. So if there is an intire thing based around this topic than please point me into direction of it and I will be happy to read it.

解决方案：
我用形状外部的东西解决了它，但不是计算背景我只是在div中添加了一个img标签...它结束了例如

img {position: absolute; top:100px;}

推荐答案

这是一个使用 shape-outside 但您需要注意：

body {
  max-width:600px;
}
p {
  text-align:justify;
}
div {
  shape-outside: inset(50px 0px 50px 0px);
  background: url(https://lorempixel.com/400/200/) 5px 50px/100% calc(100% - 100px) no-repeat;
  width: 200px;
  height: 200px;
  float: right;
}

<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis. Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, m fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit deleeriores unde? Tempora dolorem, ad quidem quis adipisci dolores tempore  m fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit deleeriores unde? Tempora dolorem, ad quidem quis adipisci dolores tempore</p>

这篇关于图像周围的HTML / CSS文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！