如何在较小的屏幕上水平放置侧边栏？

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;
 }

并在同一媒体查询中添加一些样式以使其看起来不错