Question

我有一张照片，我想相对于右侧边距（即10像素）对齐。我试图定义一个固定的顶部/左侧值：如果我在纵向模式下使用我的表格它会很好，但是如果它在横向模式下使用，它会给出“丑陋”的结果。

这是我目前的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;
}

是否有“清洁”的方法来实现这一目标？非常感谢您阅读我。

Answer 1

您需要在相对定位的容器中使用正确值进行绝对定位。

#meteo_icon {
  position: relative;      
}

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

将图片与右侧CSS对齐：使用哪个标签

1 个答案: