Выровняйте изображение вправо CSS: какой тег использовать

У меня есть изображение, которое я хотел бы выровнять относительно правого края (т. Е. 10 пикселей). Я попытался определить фиксированное верхнее/левое значение: он отлично работает, если я использую свою таблицу в портретном режиме, но если она используется в ландшафтном режиме, она дает «уродливый» результат.Выровняйте изображение вправо CSS: какой тег использовать

THis мой текущий 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: какой тег использовать

ответ

Смежные вопросы