CSSの画面上の異なる場所に複数の画像を配置する定義済みコーディネート

ここでは、画面上の別の場所に配置する4つの画像を設定しています。実際には、画像の左上の座標をコードのように配置したいのですが、うまくいきません。エラーを見つけ出す際にお手伝いできますか？ CSSの画面上の異なる場所に複数の画像を配置する定義済みコーディネート

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style type="text/css"> 
 
#imagegroup1{ 
 
\t display:inline; 
 
\t positon:absolute; 
 
\t top:160px;/*pos 
 
\t left:690px; 
 
\t 
 
\t } 
 
\t #imagegroup2{float:left; 
 
\t display:inline; 
 
\t positon:static; 
 
\t top:160px; 
 
\t left:1000px; 
 
\t } 
 
#imagegroup3{ 
 

 
\t display:inline; 
 
\t positon:absolute; 
 
\t top:360px; 
 
\t left:690px; 
 
\t 
 
\t } 
 
#imagegroup4{ 
 
\t display:inline; 
 
\t positon:absolute; 
 
\t top:360px; 
 
\t left:1000px; 
 
\t 
 
\t } 
 
</style> 
 
</head> 
 
<body> 
 
<div id ="imagegroup1"><img src="img1.jpg" height="180px" width="270px"/></div> 
 
<div class="imagegroup2"><img src="img2.jpg" height="180" width="270"/></div> 
 
<img id="imagegroup3" src="img3..jpg" height="180" width="270"/> 
 
<img id="imagegroup4" src="img4.jpg" height="180" width="270"/> 
 

 
</body>

出典

2016-05-14 Drishti Tulsi

CSSの4行目に部分的なコメント（ '/ * pos'）があります。それを完了（ '* /'）または削除する必要があります。 –

ちょっと来ました！ –

これについて移動する最良の方法は、CSSフレームワーク（ブートストラップ、財団など）から、グリッドを使用することです。フロートの使用はこのタイプの位置決めにはお勧めできません。 cssフレームワークを使用したくない場合は、テーブルを使用できます。

<table> 
    <tr> 
    <td>Image 1</td> 
    <td>Image 2</td> 
    </tr> 
    <tr> 
    <td>Image 3</td> 
    <td>Image 4</td> 
    </tr> 
</table>

この構造を使用してすべての位置を簡単に変更できます。また、レスポンシブデザインを実装する方がずっと簡単です。

出典

2016-05-14 21:09:29 ThomasK

このようにして、テーブルの上の座標を右に置くだけでいいです！ –

絶対配置を使用するはい。あなたのCSSの追加位置：絶対; top：SomeNumberpx;左：someNumber px。 – ThomasK

さらにレビューしてみると、元の質問によく答えるはずです。 – ThomasK

CSSの画面上の異なる場所に複数の画像を配置する定義済みコーディネート

答えて

関連する問題