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

Question

My timer image goes on next line of the page when i look thru mobile device and i wanna stop that...only using css I have 2 images logo and timer. 当我通过移动设备查看时，我的计时器图像将显示在页面的下一行，我想停止该操作...仅使用CSS，我就有2个图像徽标和计时器。 the problem is when i see my header on small device the timer image goes on next line..and it looks weird. 问题是，当我在小型设备上看到标题时，计时器图像将显示在下一行..它看起来很奇怪。

<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

If you want to display both images in one line then you can structure your code like this 如果要在一行中显示两个图像，则可以像这样构造代码

<!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

i think this will help you some 我认为这会帮助你一些

 .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 个解决方案

解决方案1
0 2015-10-21 10:45:45

解决方案2
0 2015-10-21 10:53:34

解决方案3
0 2015-10-21 11:54:55

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

问题描述

3 个解决方案

解决方案1 0 2015-10-21 10:45:45

解决方案2 0 2015-10-21 10:53:34

解决方案3 0 2015-10-21 11:54:55

解决方案1
0 2015-10-21 10:45:45

解决方案2
0 2015-10-21 10:53:34

解决方案3
0 2015-10-21 11:54:55