如何在較小的屏幕上水平放置側邊欄？

Question

我想為當地的食堂做些好事，所以我免費為他們建立了一個新的網頁。 但是，我有點新手，可以在畫龍點睛的時候真正使用一些幫助。

盡管我將非常感謝HTML / CSS的任何幫助，尤其是指出我的編碼錯誤，但目前我的問題是我的側邊欄。 當屏幕小於桌面尺寸時，我最終使它浮動在主要內容之上，但它絕對拒絕水平顯示其自身和內容。 有人可以幫我找出我做錯了什么嗎？

和..非常感謝您。 我已經為這個問題苦苦掙扎超過一天了。

我所有的HTML / CSS： https ： //codepen.io/Pinchofginger/pen/KZqzEP#code-area

我的側邊欄代碼：

 <div id="sidebar">

          <ul>
            <li class="fancy">
              <h3>Tryk her</h3> <img src="billeder/kat/.jpg" alt="kat">
              <p><a href="#">Kat2</a>
                <p>bla bla bla bla bla bla bla bla</p>
            </li>

            <li class="fancy">
              <h3>Tryk her også</h3> <img src="billeder/kit.jpg" alt="Kit">
              <p><a href="#">Kat2</a>
                <p>bla bla bla bla bla bla</p>
            </li>

            <li class="fancy">
              <h3>Endelig</h3><img src="billeder/killinger.jpg" alt="Her">
              <p>
                <p><a href="#">Kat3</a> bla bla bla bla bla bla bla</p>
            </li>

            <li class="fancy"> link </li>
            <li class="fancy"> link </li>
            <li class="fancy"> link </li>
            <li class="fancy"> link </li>

          </ul>
        </div>
        <!-- Sidebar -->

和CSS

   #sidebar
{   text-align: center;
    float: left;
  width:15%;
    margin-right: 3%;
    padding: 15px 10px 10px 10px;
    background: white;
    color: #215e1e;
    border: solid 1px #c0c0c0;}

#sidebar img
{width: 87%;}

#sidebar h2, #sidebar h3, #sidebar h4
{   color: black;}

#sidebar a
{ font-weight: bold;
text-decoration: none;
color: #2b6028}

#sidebar ul {   list-style: none;}


.fancy
{   padding: 8px 0 8px 0;
    border-top: solid 1.3px brown;}

Answer 1

嘗試查看CSS網格或Bootstrap之類的內容，它們可能會為您提供所需的內容。

Answer 2

遵循以下原則：

@media only screen and (max-width: 750px) {

    #sidebar {
        float: none;
    }

    #sidebar .ul {
        display: inline-box;
    }

}

（到css文件的末尾）

編輯：我不建議為這樣的小事情使用CSS框架，因為它們可能會過大，並且至少需要花費幾周的時間，您才能了解這些情況:)

Answer 3

我認為要獲得想要的效果，您需要執行以下操作：

@media only screen and (max-width: 800px){
 #sidebar{
     width:100%;
 }
 #sidebar li,h3,img,p{
     display:inline;
 }

並在同一媒體查詢中添加一些樣式以使其看起來不錯