时间戳

首页 > 解决方案 > 段落旁边的图像从左下角而不是左上角开始

javascript - 段落旁边的图像从左下角而不是左上角开始

问题描述

在该段落中 - 我希望文本从 开始，top-left但默认情况下它从bottom-left. 有什么简单的方法可以直接告诉段落，仅从“左上角”开始文本。我不知道任何这样的 CSS 或命令。如果有人知道，请帮忙。

* {margin:0;padding:0;box-sizing:border-box;}
h1 {background:#000;color:#fff;padding:5px;text-align:center;margin-bottom:10px;}
.content {padding:20px;}
.green-box {border:2px solid #9a9a9a;padding:10px;}
.green-box > * {display:inline-block;}
.green-box p {text-align:top-left;}
<h1>Fighter Aircrafts</h1>

<div class="content">
  <div class="green-box">
      <img src="https://picsum.photos/id/237/200/300" />
      <p> ...content... </p>
  </div>
</div>

注意：我想告诉/CSS 段落并将其默认文本设置为左上角。另外，不要做任何makeshift arrangements喜欢做 [img float:left] 等的事情。

标签： javascripthtmlcss

解决方案

在 flexboxes 之前，可以使用 float 属性解决类似的问题。因为 flexboxes 你可以做这样的事情：

* {margin:0;padding:0;box-sizing:border-box;}
h1 {background:#000;color:#fff;padding:5px;text-align:center;margin-bottom:10px;}
.content {padding:20px;display:block;position:relative;}
.green-box {border:2px solid #9a9a9a;padding:10px;display:flex;position:relative;}
<h1>Fighter Aircrafts</h1>

<div class="content">
  <div class="green-box">
      <img src="https://picsum.photos/id/237/200/300" />
      <p> ...content... </p>
  </div>
</div>

推荐阅读