无法将图像放在文本旁边（推入下一个 div）答案

【问题标题】：Can't place image next to text (pushed into next div)无法将图像放在文本旁边（推入下一个 div）
【发布时间】：2018-08-18 06:51:45
【问题描述】：

我想在 div 内的一些文本旁边放置一个图像，但图像被推到下面的下一个 div 中，并且无论我增加多少边距或填充都不会向上移动。我希望图像的中心位于图片中箭头尖端的位置：

Here's where the image is and where I want it to be

这是 CSS 和 HTML：

.header {
  padding: 10px 16px;
  background: #1919ff;
  color: #f1f1f1;
}

#about {
  background-color: #ccccff;
  height: 400px;
  width: 67%;
  margin: auto;
}
   
.round-border{
    border-width: 0px;
    border-style: solid;
    border-radius: 50%;
  }
.portrait-image{
    width: 25%;    
    margin-bottom: 120%;
  }
h9 {
    font-size: 142%;
    margin: auto;
    padding-right: 30%;
    padding-top: 12%;
    display: inline-block;
  
}
.header-bar{
    height: 3px;
    width: 51%;
    background: #272C31;
    margin-right: 23%;
    margin-top: 3%;
}
h10 {
    font-size: 142%;
    margin: auto;
    padding-right: 24%;
    padding-top: 5%;
    display: inline-block;
}
#image position {
  position: relative;
  z-index: 1;
  margin-botton: 40%;
  padding-bottom: 20%;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<style>
img {
    float: right;
}
.clearfix {
    overflow: auto;
}
</style>

<div class="header" id="myHeader">
  <h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xxxxxxxxx</h2>
</div>

<body style="background-color: #5D6D7E;">
  <div id="about" align="center" position="relative">
    <h9><p align="right">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </h9>
    <div class="header-bar"></div>
    <h10><p align="right">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </h10>
    <div id="image position"><img class="portrait-image round-border" align="right" src="http://abload.de/img/gpuxh.png" alt="portrait">
    </div>
  </div>
 </body>

任何帮助将不胜感激，谢谢。

【问题讨论】：

类头在体外的div？要对齐 p 内的文本，请使用 text-align not align。 pParagraph 里面 h 没有意义。
能否请您减少代码例如只显示问题部分
我稍微减少了代码，但问题是我不知道问题到底出在哪里。我认为它可能是阻止图像向上移动的其他元素的填充/边距。

标签： html css image position

【解决方案1】：

您的代码有很多问题，我不知道从哪里开始。没有 h9 或 h10 标题标签。我建议使用有效的标题标签并根据您的喜好修改字体大小。此外，您不能使用空格分隔类/ID 名称。因此，“图像位置”将不起作用。尽我所能修复它。

.header {
  padding: 10px 16px;
  background: #1919ff;
  color: #f1f1f1;
}

#about {
  background-color: #ccccff;
  height: 400px;
  width: 67%;
  margin: auto;
  box-sizing: border-box;
}

.round-border {
  border-radius: 50%;
}

.portrait-image {
  width: 25%;
}

.header-bar {
  height: 3px;
  width: 51%;
  background: #272C31;
  margin-right: 23%;
  margin-top: 3%;
}

#image-position {
  float: right;
  margin: 15% 5% 0 0;
}

#text {
  float: left;
  width: 57%;
  word-break: break-all;
  margin: 5%;
}
.clearfix {
  /*clear the floats here*/
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

<body style="background-color: #5D6D7E;">
  <div class="header" id="myHeader">
    <h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xxxxxxxxx</h2>
  </div>
  <div id="about" class="clearfix">
    <div id="text">
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
      <div class="header-bar"></div>
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>
    <img class="portrait-image round-border" id="image-position" src="http://abload.de/img/gpuxh.png" alt="portrait">
  </div>

</body>

【讨论】：

非常感谢！这几乎解决了所有问题。唯一的问题是图像现在正在接触标题，我想稍微向下移动它，但我不能，即使我修改了边距和填充。图片：abload.de/img/websiteimage3rwjbd.png
margin-top 在 img 上会起作用。我也加了。
我为 margin-top 尝试了许多不同的值，或者将边距与您提供的四个值一起使用，图像仍然粘在页眉上。即使我修改了图像的宽度。
您能否确认您的 text 和 img 元素是具有共同父级的兄弟姐妹？您还可以使用 Chrome 债务人调试问题。
我确认“text” div 和 image 元素是“about” div 的共同父元素的兄弟。我知道你的修复应该可以工作，因为当我运行代码 sn-p 时它看起来很完美，但是当我在我的 HTML 编辑器上运行它时，它会产生这个卡在标题上的问题。无论如何，感谢您的帮助，我的问题已解决 99%，并且代码更简洁，因此我非常感谢。

【解决方案2】：

您可以使用 CSS 浮动。它适用于“浮动”到文本一侧的元素。

尝试设置：

#image-position {
  /* ... Your css here */
  float: right;
}

更多信息here。

【讨论】：

我在 HTML 样式标签中使用 'float: right'。我尝试将它放在 CSS 中，但它仍然不起作用。
尝试将图像放在 div id="about" 之外。

【解决方案3】：

使用引导程序来实现这一点，试试下面的代码 sn-p。

<div class="container">
  <div class="row">
        <div class="col-md-8">
            <p>
                Your text goes here... 
            </p>
        </div>
        <div class="col-md-4">
          <img src="">      
      </div>
  </div>
</div>

希望对你有帮助，

【讨论】：

试过了，文字错位，图片缩小，向右推：abload.de/img/websiteimage2aaore.png