如何移动图片下方的文字？答案

【问题标题】：How to move text beneath an Image?如何移动图片下方的文字？
【发布时间】：2017-07-07 03:24:31
【问题描述】：

如何将图片下方的文字移到右侧？我正在努力让这个文本与一边对齐。各位大佬，怎么把图片下面的文字移到右边呢？我正在努力让这个文本与一边对齐。

#main leftbar posts {
    display: inline-block;
    text-align: justify;
    margin-top: 50px;
}

#main leftbar img {
    display: inline;
    height: 250px;
    margin-left: 18px;
    margin-top: 17px;
    border: solid black 1px;
    box-shadow: 0px 0px 10px -3px;
}

#main leftbar p {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    margin-left: 300px;
    border-left: solid 5px black;
    padding-left: 6px;
}

<main id="main">
  <leftbar>
    <posts>
      <post1>
        <a url href="#"><img src="http://placehold.it/350x150"></a>
          <p>sdjksahdkjhajks dhjaskhdkjahs dsajhdka dashjdkahd  ahdjskadhka dashjdkahsdjk dasjdhkalhdjkad 
ashjdkalhdjka  sdashdjakhdlka dashdjkahdskjas 
dashjdkashdklas dasjkdhaksdl.
          </p>
      </post1>
    </posts>
  </leftbar>
</main>

【问题讨论】：

??您的 sn-p 似乎显示图像下方和最右边的文本？不是吗？预期的最终结果是什么？容器页面的 100% 宽度，无论宽度如何，图像总是相同的大小，图像和文本周围的其他任何东西，.. ？ :)

标签： html css image text margin

【解决方案1】：

您可以将float: left 添加到您的图片中：

#main leftbar img {
    float: left;
}

并将display:block（默认）添加到您的段落中。

#main leftbar p {
    display: block;
}

【讨论】：

【解决方案2】：

#main leftbar img {
    float: left;
}

和

#main leftbar p {
    margin-left: 300px;
    border-left: solid 5px black;
    padding-left: 6px;
}

P 元素是文本元素的原因，所以总是内联的。上面的技巧应该可以做到！

【讨论】：

【解决方案3】：

正如阿明所说，您可以将float: left 添加到您的图像中：

#main leftbar img {
    float: left;
}

并将display:block（默认）添加到您的段落中。

#main leftbar p {
    display: block;
}

但不要忘记在左栏 img 上添加宽度

#main leftbar img {
    display: inline;
    width: 250px;
    height: 250px;
    margin-left: 18px;
    margin-top: 17px;
    border: solid black 1px;
    box-shadow: 0px 0px 10px -3px;
    float: left;
}

它会将您的图像保留在固定的 div 上。即使您放置的图像宽度大于 300 像素。它不会破坏你的段落。

【讨论】：

【解决方案4】：

不太确定我是否理解您的问题，但如果 p 仍然是块，它将保持在图像下。您可以使用 padding 来推送文本和使用 background-gradient 来绘制边框。（可以与bg-color和bg-image混合使用）

#main leftbar posts {
    display: inline-block;
    text-align: justify;
    margin-top: 50px;
}

#main leftbar img {
    display: inline;
    height: 250px;
    width:250px;
    margin-left: 18px;
    margin-top: 17px;
    border: solid black 1px;
    box-shadow: 0px 0px 10px -3px;
}

#main leftbar p {
padding-left: 306px;
background:linear-gradient(to right,transparent 297px, black 297px, black 300px, transparent 300px);
}

<main id="main">
  <leftbar>
    <posts>
      <post1>
        <a url href="#"><img      src="Pictures/Bleiben%20wer%20wir%20sind.jpg"></a>
          <p>sdjksahdkjhajks dhjaskhdkjahs dsajhdka dashjdkahd  ahdjskadhka dashjdkahsdjk dasjdhkalhdjkad 
ashjdkalhdjka  sdashdjakhdlka dashdjkahdskjas 
dashjdkashdklas dasjkdhaksdl.
          </p>
      </post1>
    </posts>
  </leftbar>
</main>

与背景图像和颜色相同的 sn-p ：

#main leftbar posts {
    display: inline-block;
    text-align: justify;
    margin-top: 50px;
    background:
linear-gradient(to right,transparent 297px, black 297px, black 300px, rgba(255, 255, 00,0.25) 300px), linear-gradient(to bottom,gray 297px, black 297px, black 300px, rgba(217, 253, 59,0.5) 300px);
    
}

#main leftbar img {
    display: inline;
    height: 250px;
    width:250px;
    margin-left: 18px;
    margin-top: 17px;
    border: solid black 1px;
    box-shadow: 0px 0px 10px -3px;
}

#main leftbar p {
margin-top:26px;
padding-left: 306px;
background:
linear-gradient(to right,transparent 297px, black 297px, black 300px, rgba(217, 253, 59,0.5) 300px), 
url(http://lorempixel.com/1200/200/) no-repeat  300px 0
;
}

<main id="main">
  <leftbar>
    <posts>
      <post1>
        <a url href="#"><img      src="Pictures/Bleiben%20wer%20wir%20sind.jpg"></a>
          <p>sdjksahdkjhajks dhjaskhdkjahs dsajhdka dashjdkahd  ahdjskadhka dashjdkahsdjk dasjdhkalhdjkad 
ashjdkalhdjka  sdashdjakhdlka dashdjkahdskjas 
dashjdkashdklas dasjkdhaksdl.
          </p>
      </post1>
    </posts>
  </leftbar>
</main>

【讨论】：