CSS-布局全亂了

Question

我不確定CSS到底是怎么錯的，布局如此混亂。 我嘗試了多種方法來修復它，但布局似乎並不是我想要的方法。 請檢查HTML和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); 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> 

Answer 1

我非常沮喪，錯過了CSS中的一些簡單拼寫錯誤。

這樣就解決了問題。

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