hbuilderで画像を一列に並べる方法は何ですか？

1年 ago
芽依, 雨夜
1 minute

画像を一列に並べるには、HBuilderのflexレイアウトまたはgridレイアウトを使用できます。

flexボックスを使ったレイアウトの手順は以下の通りです：

  1. 表示 (ひょうじ)
  2. フレックス
  3. フレックス方向
  4. 列
  5. 画像
  6. 以下を日本語で自然に言い換えると
  7. フレックス成長

以下はサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
  flex-direction: row;
}

img {
  flex-grow: 1;
}
</style>
</head>
<body>

<div class="container">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

</body>
</html>

Gridレイアウトを使用する手順は次の通りです：

  1. 表示
  2. グリッド
  3. 画像
  4. この記事は私の興味を引きました。この記事には私の関心を引かれました。
  5. 列のテンプレート

以下はサンプルコードです：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
}

img {
  width: 100%;
}
</style>
</head>
<body>

<div class="container">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

</body>
</html>

具体に必要なレイアウト方法を選択するには、上記は一般的な2つの方法です。

bannerAds