Question

我想将图片对齐到一个段落的右边，我希望能够这样做而不必在段落上设置固定的宽度以及一些填充距离图片。我怎么能这样做？

＆＃13;

* {
  box-sizing: border-box;
}

p {
  float: left;
  border: solid 1px #000;
  display: inline-block;
}

img {
  float: right;
  display: inline-block;
}

＆＃13;

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<img src="https://media.tenor.co/images/fe795771396053d4e1d55904dcf20298/tenor.gif" />

＆＃13;

Answer 1

将<img>放在<p>内。

<p>
<img src="https://media.tenor.co/images/fe795771396053d4e1d55904dcf20298/tenor.gif" />
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</p>

https://jsfiddle.net/uvew5yw2/

Answer 2

用display: inline-block;替换两个元素中的display: block;或完全删除它。如果它不起作用，您可以将width:x px添加到元素中。

Answer 3

将IMG移到P标签上方，然后从P标签中移除浮动和显示。

p {
  border: solid 1px #000;
  width: auto;
}

这是更新的jsfiddle：https://jsfiddle.net/mnakoajk/5/

然后在IMG标记上放置边距和边距底部，以使段落文本保持安全距离。

更新了jsfiddle：https://jsfiddle.net/mnakoajk/6

Answer 4

指定段落宽度。与public class Result { public object Value {get; set;} } public interface IYourTask { Result Execute(); } public class StringManipulationTask { public Result Execute() { // do something return new Result("resultofManipulation"); } } public class NoReturnDataTask { public Result Execute() { // do something return new Result(); // with no data - "empty result" } }

一样

Answer 5

更改p和img的顺序。并从p元素中删除内联块属性。

* {
  box-sizing: border-box;
}

p {
  border: solid 1px #000;
}

img {
  float: right;
  display: inline-block;
}

<img src="https://media.tenor.co/images/fe795771396053d4e1d55904dcf20298/tenor.gif" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Answer 6

我认为这可能是一个解决方案：

https://jsfiddle.net/mnakoajk/1/

我将解释：您可以为<p>和<img>标记使用包装div。 div包装器必须具有以下规则：

display: flex;

所以你可以将内部元素放在彼此旁边。在此之后，您可以控制img标签的宽度和高度。

希望有所帮助

Answer 7

添加/删除或替换显示属性将无济于事，因为

并且两者都是块级元素。只有通过增加宽度才能实现。

Answer 8

看看这个JSFiddle。我在html的style标签中添加了css，但我可以在短时间内更改它。

https://jsfiddle.net/o6f2z27n/5/

现在的想法是将宽度分别设置为段落和img的60％和30％

     <div class="container">
         <p></p>  
         <img />
    </div>

Answer 9

您可以将两者放在容器中并使用flexbox。对于下面的示例，我使用＆＃34; body＆＃34;作为容器。见下面的代码

＆＃13;

* {
  box-sizing: border-box;
}
body {
  display: flex;
}
p {
  border: solid 1px #000;
  width: auto;
  margin: 0;
}

img {
}

＆＃13;

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

<img src="https://media.tenor.co/images/fe795771396053d4e1d55904dcf20298/tenor.gif" />

＆＃13;

将图像对齐到段落css的右侧

9 个答案: