Question

如何将图像下方的文字移动到右侧？我正在努力让这个文本与侧面对齐。嘿伙计们，我怎么能把图像下面的文字移到右边呢？我正在努力让这个文本与侧面对齐。

#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>

Answer 1

您可以为图片添加float: left：

#main leftbar img {
    float: left;
}

并在段落中添加display:block（默认）。

#main leftbar p {
    display: block;
}

Answer 2

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

和

{{1}}

P元素是文本元素的原因，所以总是内联。上面的诀窍应该做到!!

Answer 3

正如armin所说，您可以在图片中添加float: left：

#main leftbar img {
    float: left;
}

并在段落中添加display:block（默认）。

#main leftbar p {
    display: block;
}

但不要忘记在leftbar 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;
}

如果您放置更大宽度的图像然后300px，它将使您的图像保持固定的div.even。它不会破坏你的段落。

Answer 4

我不太清楚我理解你的问题，但如果p仍然是一个块，它将保持在图像下。您可以使用填充来推送文本，使用背景渐变来绘制边框。（它可以与bg-color和bg-image混合使用）

＆＃13;

#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);
}

＆＃13;

<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>

＆＃13;

与ackground图像和颜色相同的片段：

＆＃13;

#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
;
}

＆＃13;

<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>

＆＃13;

如何在图像下方移动文字？

4 个答案: