画像を右側に揃えるCSS：使用するタグ

画像の右側の余白（10ピクセル）に対して揃えたい画像があります。私は固定されたトップ/左の値を定義しようとしました。しかし、テーブルをポートレートモードで使用すると完全にうまく動作しますが、ランドスケープモードで使用すると「醜い」結果が得られます。画像を右側に揃えるCSS：使用するタグ

これは私の現在のHTMLコードです：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Domoos mobile </title> 
    <meta http-equiv="refresh" content="600"> 
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no"/> 
    <!--Using jQuery and jQuery UI for display effects--> 
    <script src="js/jquery-2.1.3.min.js"></script> 
    <script src="jquery-1.12.0/jquery-ui.min.js"></script> 
    <!--Using the hamburger menu display code--> 
    <script src="scripts/hamburger.js"></script> 
    <!--Using Media Queries, if the viewport is smaller than 700px use another stylesheet--> 
    <link rel="stylesheet" type="text/css" media="all" href="css/hamburger.css"/> 
    <link rel="stylesheet" type="text/css" href="css/mystyle_hamburger.css" /> 
    <script type="text/javascript" src="scripts/date_time.js"></script> 
    <script> 
     // Global variables 
     var AutoScript = false; 
     var ValueCheck = -1; 
     var ControleurUpdate = ""; 
     var ThermostatManualUpdate = false; 
    </script> 
</head> 
<body> 
    <!--This wrapping container is used to get the width of the whole content--> 
    <div id="container"> 
    <!--The Hamburger Button in the Header--> 
    <header> 
    <div id="hamburger"> 
    <div></div> 
    <div></div> 
    <div></div> 
    </div> 
    </header> 
    <!--The mobile navigation Markup hidden via css--> 
    <nav> 
    <ul> 
    <!--<li><a href="#"><img src="assets/icons/sun_icon.png" alt="" width="14" height="14">menuitem 1</a></li> --> 
    <li><a href="#">menuitem 1</a></li> 
    <li><a href="#">menuitem 2</a></li> 
    <li><a href="#">menuitem 3</a></li> 
    <li><a href="#">menuitem 4</a></li> 
    <li><a href="#">menuitem 5</a></li> 
    <li><a href="#">menuitem 6</a></li> 
    </ul> 
    </nav> 
    <!--The Layer that will be layed over the content 
    so that the content is unclickable while menu is shown--> 
    <div id="contentLayer"></div> 
    <!--The content of the site--> 
    <div id="content"> 
    <div id="logo" style="position:relative; width:50%; height:50%;"> 
     <img src="assets/icons/logo_Domoos_lab.png" alt ="" style="width:75px;height:54px;"> 
    </div> 
     <div id="tag_domoos_title"> 
     <p>Domoos mobile</p> 
    </div> 
    <div id="tag_sunrise_sunset"> 
     <p><img src="assets/icons/sun_icon.png" alt="" width="14" height="14">&#8593; 06:25 &#8595; 20:33</p> 
    </div> 
     <div id="date"> 
      <script type="text/javascript">window.onload = getDate('date');</script> 
     </div> 
     <div id="time"> 
      <script type="text/javascript">window.onload = getTime('time');</script> 
     </div> 
     <div id="current_weather_conditions"> 
      <p> 
      <b>Conditions m&#233;t&#233;orologiques actuelles (19.08.2016 19:15)</b>: 
      Vent 4 km/h SO &#149; Humidit&#233; 74% &#149; Pression 1010.9 hPa </p> 
     </div> 
     <div id="tag_weather_condition"> 
      <p>Eclaircies &#149; <b>22&deg;C</b></p> 
     </div> 
     <div id="meteo_icon" style="position:absolute;"> 
      <img src="assets/meteo_icons/neige-forte-big.png" alt="" style="width:40px;height:40px;"> 
     </div> 
     </p>    
    </div> 
    </div> 
</body> 
</html>

は、これが私の現在のCSSです：

#meteo_icon img{ 
    position: relative; 
    top: -130px; 
    left: 270px; 
}

は "クリーナー" があり、これを達成するための手段？私を読んでくれてありがとう。

出典

2017-01-08 Laurent

メディアクエリを使用してみましたか？ – larz

私はあなたが "メディアクエリ"の意味を理解していません。 – Laurent

'right：10px'や' left'の代わりにどんな値を使ってみましたか？（あなたは右にアイテムを置いておきたいと考えています）また、より多くのコードを表示して、あなたのシナリオを最も良く助けることができます。 – Syden

あなたは相対位置決め容器内右値と絶対位置決めを必要とします。

#meteo_icon { 
    position: relative;  
} 

#meteo_icon img { 
    position: absolute; 
    right: 0; 
}

出典

2017-01-08 19:04:45

完璧、多くのありがとう – Laurent

画像を右側に揃えるCSS：使用するタグ

答えて

関連する問題