停止圖像在小型設備上的下一行

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 個解決方案

解決方案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