HTML在div中围绕图像环绕文本

Question

我的文档看起来像这样： http://bsod.pw/

我希望将position: absolute;放在图像旁边，如下所示：

请注意，我无法使用<div id="img"> <img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Aloe_vera_%284759242525%29.jpg" height="50%" width="auto" ></img> </div> <h1>My text</h1> ，因为这会使设备之间的图像位置不同。

HTML：

div#img{
    position: relative;
    left: 500px;
}

CSS：

function myFunction(reference) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var formula = SpreadsheetApp
    .getActiveSpreadsheet()
    .getRange(reference)
    .getFormula();
  var text = /\((.*?),(.*?)\)/.exec(formula)[2];
  var value = sheet.getRange(text).getValue();
  return formula.replace(/\,.*?\)/,","+value+")");
}

Answer 1

将图像浮动到右侧。例如：

img {
    float:right;
}

Answer 2

如果你仍想用相对来控制图像的位置，你可以在文本上使用float：left并添加display：inline to the image。

div#img{
    position: relative;
    left: 500px;
    display: inline;
}
.myText{
    float: left;
}

<div id="img">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Aloe_vera_%284759242525%29.jpg" height="50%" width="auto" ></img>
</div>
<h1 class="myText">My text</h1>

Answer 3

您可以在主分区中使用属性float：right。 或者你可以使用bootstrap CSS命令在小屏幕中更好地保​​存它

div#img{
   float:right;
}

<div id="img">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Aloe_vera_%284759242525%29.jpg" height="50%" width="auto" >
</div>
<h1>My text</h1>

Answer 4

试试这个：

div#img{
float: right;
width: 300px;
}

而不是：

div#img{
position: relative;
left: 500px;
}

Answer 5

您也可以使用flexbox。

＆＃13;

＆＃13;

#img{
    display: flex;
}
#img h1{
    flex:1;
}
#img img{
   flex:1;
   max-width: 50%;
}

＆＃13;

<div id="img">
   <h1>My text</h1>
   <img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Aloe_vera_%284759242525%29.jpg"></img>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 6

我认为你也应该修正图像的宽度，因为这样可以更好地控制设计。

<强> HTML：

<img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Aloe_vera_%284759242525%29.jpg" height="50%" width="50%" align="right" />
<h1>My text</h1>

Answer 7

另一种可能性是将图像设置为背景图像并将其定位在右侧。

  #img{
    background-image:url('https://upload.wikimedia.org/wikipedia/commons/0/01/Aloe_vera_%284759242525%29.jpg');
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: right;  
  }

<div id="img" style="height:300px">
  <h1>My text</h1>
</div>