Question

当我通过移动设备查看时，我的计时器图像在页面的下一行上显示，我想要停止...只使用css 我有2个图像标志和计时器。问题是，当我在小设备上看到我的标题时，计时器图像在下一行继续......它看起来很奇怪。

<header class="mainheader">
        <div>
            <img src="/images/logo.png">
            <img src="/images/timer.png" class="timerimg">
        </div>
</header>
.maiheader{
    height: 4em;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 0.9em;
    padding-left: 2em;
    padding-right:2em;
}

.timerimg{
    float:right;
}

Answer 1

如果您想在一行中显示两个图像，那么您可以像这样构建代码

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.maiheader{
    height: 4em;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 0.9em;
    padding-left: 2em;
    padding-right:2em;
}

.logo{
    float:left;
width:50%;
}

.timer{
    float:left;
width:50%;
}
img
{
width:100%;
}
</style>
</head>
<body>
<header class="mainheader">
        <div>
<div class="logo">
            <img src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"></div>
           <div class="timer"> <img src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"></div>
        </div>
</header>
</body>
</html>

Answer 2

   <body onresize="demo()">
      <header class="mainheader">
        <div>
             <img src="/images/logo.png" id="logo0">
             <img src="/images/timer.png" id="logo1"class="timerimg">
        </div>
 </header>
 <style>

   .maiheader{
       height: 4em;
       position: absolute;
       top: 0;
      left: 0;
      right: 0;
      padding-top: 0.9em;
      padding-left: 2em;
      padding-right:2em;
             }

 .timerimg  {
     float:right;
            }
 </style>
 <script>
    function demo(){
          var logo1 = document.getElementById("logo1").style;
          var logo0 = document.getElementById("logo0").style;
if(innerWidth < 358){logo1.marginTop="-238";}else{logo1.marginTop="0";}
                    }
 </script>
 </body>

Answer 3

我认为这会对你有所帮助

.wrapper {
  width: 49%;
  
  max-width: 49%;
 
  display: inline-block;
  
}
.logo {
  background: url('https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat;
  width: 100%;
  height: 0;
  padding-top: 33.82%;
  /* (img-height / img-width * width) */
  background-size: contain;
}
.timer {
  background: url('https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat;
  width: 100%;
  height: 0;
  padding-top: 33.82%;
  /* (img-height / img-width * width) */
  background-size: contain;
}

<header class="mainheader">

  <div class="wrapper">
    <div class="logo"></div>
  </div>
  <div class="wrapper">
    <div class="timer"></div>
  </div>
</header>

停止图像在小设备上的下一行

3 个答案: