android - CSS - 布局一团糟

标签 android html css mobile browser

我不确定布局如此困惑的 CSS 有什么问题。我尝试了很多方法来修复它，但布局似乎不是我想要的方式。请检查 HTML 和 CSS，您可能会有所了解。

我试图让它看起来像图片中的那个，并希望它在移动浏览器上也是这样。

我知道这个要求太高了，但我想在放弃之前尝试一下。我希望它对我来说像 Photoshop 一样简单。感谢您的阅读。

enter image description here 

  
  #left {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 10px 20px;
  border-top: 100px solid rgba(1,141,196,1);
  border-right: 2px solid rgba(1,141,196,1);
  border-bottom: 100px solid rgba(1,141,196,1);
  border-left: 2px solid rgba(1,141,196,1);
  font: normal 16px/normal "Times New Roman", Times, serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgba(1,141,196,1);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
		margin-top: 50%;
		margin-bottom: 50%;
}

#left:hover {
  border-top: 100px solid rgba(164,215,234,1);
  border-right: 2px solid rgba(164,215,234,1);
  border-bottom: 100px solid rgba(164,215,234,1);
  border-left: 2px solid rgba(164,215,234,1);
  background: rgba(164,215,234,1);
}

#right {
  float: right;
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 10px 20px;
  border-top: 100px solid rgba(1,141,196,1);
  border-right: 2px solid rgba(1,141,196,1);
  border-bottom: 100px solid rgba(1,141,196,1);
  border-left: 2px solid rgba(1,141,196,1);
  font: normal 16px/normal "Times New Roman", Times, serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgba(1,141,196,1);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
	margin-top: 50%;
		margin-bottom: 50%;
}

#right:hover {
  border-top: 100px solid rgba(164,215,234,1);
  border-right: 2px solid rgba(164,215,234,1);
  border-bottom: 100px solid rgba(164,215,234,1);
  border-left: 2px solid rgba(164,215,234,1);
  background: rgba(164,215,234,1);
}

#stop {
  display: none; 
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  margin: 0 0 0 5px;
  border: 1px solid rgb(255,80,80);
  -webkit-border-radius: 3px;
  border-radius: 50px;
  font: normal 18px/normal "Times New Roman", Times, serif;
  color: rgba(255, 255, 255, 0.901961);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgb(255, 80, 80);
  -webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ;
  text-shadow: -1px -1px 0 rgba(15,73,168,0.658824) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
	position: absolute;
	margin-top: 30px;
}

#stop:hover {
  -webkit-box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}

#stop:active {
  background: rgba(242,188,196,1);
  -webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
  box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
}

#play {
  display: block;   
   -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  border: 1px solid #018dc4;
  -webkit-border-radius: 3px;
  border-radius: 50px;
  font: normal 18px/normal "Times New Roman", Times, serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #0199d9;
  -webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ;
  text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  position: absolute;
	margin-top: 30px;
 
}

#play:hover {
  -webkit-box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
}

#play:active {
  background: #e6eef2;
  -webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
  box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
}

#startClock {
  float: right;
  display: block;   
}

#stopClock {
  display: none;
}

body {
 background-color: #f9cf01; 
}

#heading {
    background: black;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    padding: 1.5em;
  }

#startClock {
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  border: 1px solid #018dc4;
  -webkit-border-radius: 3px;
  border-radius: 50px;
  font: normal 18px/normal "Times New Roman", Times, serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #0199d9;
  -webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ;
  text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  margin-left: 5px;
 position: absolute;
}

#startClock:hover {
  -webkit-box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
}

#startClock:active {
  background: #e6eef2;
  -webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
  box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
}

#count {
list-style: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border: none;
  font: normal 61px/1 "Times New Roman", Times, serif;
  color: #f9cf01;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  text-shadow: 4px 4px 6px rgba(0,0,0,0.5) ;
	 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
  text-align: center;
 
}

p {
  padding: 10px 10px 10px 10px;
  font: 12px/1.5 Georgia, Times New Roman, serif;
}

#stopClock {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  margin: 0 0 0 5px;
  border: 1px solid rgb(255,80,80);
  -webkit-border-radius: 3px;
  border-radius: 50px;
  font: normal 18px/normal "Times New Roman", Times, serif;
  color: rgba(255, 255, 255, 0.901961);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgb(255, 80, 80);
  -webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ;
  text-shadow: -1px -1px 0 rgba(15,73,168,0.658824) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
	position: absolute;
}

#stopClock:hover {
  -webkit-box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}

#stopClock:active {
  background: rgba(242,188,196,1);
  -webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
  box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
}

#minutes{
  float: left;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border: none;
  font: normal 20px/1 "Times New Roman", Times, serif;
  color: #f9cf01;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
   -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
  text-align: center;
  background-color: black;
}
#min{
  float: right;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border: none;
  font: normal 25px/1 "Times New Roman", Times, serif;
  color: #f9cf01;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  text-shadow: 4px 4px 6px rgba(0,0,0,0.5) ;
	 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
  text-align: center;
	position: absolute;
  margin-left: -100px;
}

p {
    padding: 10px;
}

#wrapper {
    width: 100%;
    min-width: 100px;
    max-width: 2000px;
    margin: 0 auto;
}

#header {
    float: left;
    width: 100%;
    background: #FF6633;
}

#contentliquid {
    float: left;
    width: 100%;
}

/*#content {

    margin-left: 150px;
    margin-right: 150px;
}*/

#leftcolumn {
    width: 150px;
    float: left;
    margin-left:-100%;
}

#rightcolumn {
    width: 150px;
    height: auto;
    float: left;
    margin-left: -150px;
}

#footer {
    height: 90px;
    width: 100%;
    background: black;
    clear: both;
}

img{
	width="100%";
	height="auto";
}

#time {
  width: 200px;
  height: auto;
  margin-left: 46%;
  margin-right: auto;
}

#center {
  width: 200px;
  height: auto;
  margin-left: 46%;
  margin-right: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrapper">

         <div id="header"><div id="heading">Text</div></div>
  <div id="contentliquid">
    
  <div id="content">
  <img src="http://i68.tinypic.com/24azadh.gif" width="210px" height="210px" >
  </div>
  </div>
  <div id="leftcolumn">
  <div id="left"><</div>  
    </div>
        <div id="rightcolumn">       
  <div id="right">></div>
  </div>
  
  
        <div id="footer">


  
  
 

    
    <div id="count">0</div><br />
          <div id="center">
            <div id="time">
<div id="min">Mins</div>
  <select id="minutes">
  <option value="600">10</option>
  <option value="300">5</option>
  <option value="240">4</option>
  <option value="180">3</option>
  <option value="120">2</option>
  <option value="6" selected="selected">1</option>
  </select>
</div>


            
  </div>
          <button id=startClock >Start</button><button id=stopClock >Stop</button><input type="button" value="Music OFF"  onclick="stop()" id="stop"><input type="button" value="Music ON"  onclick="play()" id="play">

 </div>

最佳答案

我非常沮丧，错过了 CSS 中的一些简单拼写错误。

这解决了问题..

img{
	width: 100%;
	height: auto;
}

关于android - CSS - 布局一团糟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38410130/

上一篇：html - 不规则的图像和字体大小 - 移动

下一篇：html - "Float:right"未应用于提交按钮

相关文章：

php - 获取用户排名(mySQL)

javascript - 阻止 Div 滚出 View

css - PrimeNG日历打开Z索引错误

java - ZXing条码扫描仪仅扫描应用程序条码

android - 安装失败，并显示消息 INSTALL_FAILED_CONFLICTING_PROVIDER

android - 如何更改工具栏导航图标和选项菜单边距

javascript - 从缩略图网格中选择多个图像

jquery - Google Maps InfoWindow，使用 jQuery 撤消子元素的样式

html - 在显示移动时 Bootstrap 不需要的空白

java - 在 Android 增强现实框架中向 POI 添加事件点击？

©2024 IT工具网  联系我们