CSS - 布局全搞砸了

我不确定布局如此混乱的CSS出了什么问题。我已经尝试了很多方法来解决它，但布局似乎不是我想要的方式。请检查HTML和CSS，你可能会有一个想法。CSS - 布局全搞砸了

我想使它看起来像图像中的一个，并希望它在移动浏览器上是这样的。

我看到这个问题太多了，但我想在放弃之前尝试。我希望它像Photoshop一样简单。谢谢你的阅读。


 
    #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); 
 
\t \t margin-top: 50%; 
 
\t \t 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); 
 
\t margin-top: 50%; 
 
\t \t 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); 
 
\t position: absolute; 
 
\t 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; 
 
\t 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) ; 
 
\t -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); 
 
\t 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) ; 
 
\t -webkit-user-select: none; 
 
    -moz-user-select: none;  
 
    -ms-user-select: none;  
 
    user-select: none; 
 
    text-align: center; 
 
\t 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{ 
 
\t width="100%"; 
 
\t 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>

来源

2016-07-16 Milind Pandharkame

请做检查的div是否正常关闭和css以及...我认为这不是那么 – vignesh

我会检查一遍..其所以现在困惑..哈哈 –

我感到非常沮丧，错过了在CSS一些简单的错别字..

这解决了问题..

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

来源

2016-07-18 07:23:56

CSS - 布局全搞砸了

回答

相关问题