标题显示在浮动图像上方而不是右侧

作者: 句号了哦哦
发布时间: 2025-01-07 12:16:16 (9天前)
转自：

3 条回复

0#
回复此人
庸人自扰1 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 自然就是改变标记 - 这是一个 <EM> 笨拙的黑客 </EM> 运用 <EM> 定位 </EM> 和 <EM> 负利润 </EM> （假设图像宽度是固定的） - 请参阅下面的演示： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> article { clear: both; /* clear the float after each article - this is important */ } img { margin: 1em; border: 1px solid black; float: left; } #a1 { padding-top: 30px; /* put some space at the top */ } #a1 h4 { position: absolute; /* positione the title in that space*/ left: 240px; top: -10px; } #a1 img { margin-top: -15px; /* shift the image to the top */ } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <article id="a1"> <h4>Title is above image</h4> <img src="https://via.placeholder.com/200" alt="about" /> 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. </article> <hr/> <article id="a2"> <img src="https://via.placeholder.com/200" alt="about" /> <h4>Title is to the right of image</h4> 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. </article> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
1#
回复此人
句号了哦哦 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <code> <h4> </code> 有默认值 <code> display </code> 块，占据了整条线。给它的风格 <code> display: inline; </code> 它会使图像和文本与它在同一行。由于图像有 <code> float: left; </code> ，它会自动转到左边。但是，由于文本仍然在旁边 <code> <h4> </code> 和一对夫妇 <code> <br> </code> 是为了让它成为你想要的。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img { margin: 1em; border: 1px solid black; float: left; } </style> </head> <body> <article id="a1"> <h4 style="display: inline;">Title is above image</h4> <img src="images/about.jpg" alt="about" /> <br><br> 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. </article> <hr/> <article id="a2"> <img src="images/about.jpg" alt="about" /> <h4>Title is to the right of image</h4> 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. </article> </body> </html> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论