Question

我正在制作一个模拟网站，并且.sidebar div移动到.info div之后，窗口从原来位置调整到.info之后。我试图确保侧边栏保持在哪里，即使窗口被调整为小于它但是它不起作用。任何帮助将不胜感激，这是代码。

    <!DOCTYPE html>
    <html>
    <head>
    <title>Sushi Restaurant</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
     <body>

      <header>
       <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Menu</a></li>
         <li><a href="#">Location</a></li>
         <li><a href="#">Contact</a></li>
        </ul>

       </header>

         <div class="info">
       <p>Food, in the end, in our own tradition, is something holy. <br>It's not about nutrients and calories.<br>
    It's about sharing. <br>It's about honesty. <br>It's about identity.</p>  
    <img src = "MomoSushi.jpg">
    </div>
      <div class ="sidebar">
    <img src = "download.png">    
      <p>265 Rock Rd, Condville DR 8182 9237</p>
      <h3>Opening Hours</h3>
     <ul>
      <li>Monday-9AM to 9PM</li>
      <li>Tuesday-9AM to 9PM</li>
       <li>Wednesday-9AM to 9PM</li>
       <li>Thursday-9AM to 9PM</li>
       <li>Friday-9AM to 9PM</li>

      </ul>
        </div>
      </body>
    </html>

* {
    margin:auto;
    }
    body {
    font: bold 1.1em Courier;
    max-width:1600px;
    min-width:1000px;
      margin:auto;
    }

    header ul li{
    width:17%;
    min-width:18%;
    margin-top:4px;
    float:left;
    margin-right:15px;
    list-style-type:none;
    border: 1px solid lightgrey;
    padding:15px 20px 5px;
    border-radius:0 0 15px 15px ;
    text-align:center;
    box-shadow: 0px 10px 5px #F5F5F5 inset;
    }
    ul {
    padding-left:0;

    }
    header {
    margin:auto;
    }
    a {
    text-decoration:none;
    color:  #888888;
    }
    .info {

    min-width:60%;

    margin-top:30px;
    height:800px;
    float:left;
    margin-left:0;
    padding:left:0;
    background-color:   #E8E8E8;


    }
    .info p {
    width: 30%;
    float:left;
    line-height:3em;
      margin-top:50px;
      margin-left:100px;

    }
    .info img {
      position:fixed;
    float:right;
    width:200px;
    height:200px;
      margin-top:60px;

    margin-left: 150px;
     border-radius:50%;

    }



    .sidebar {
    min-width:30%;
    margin-left:5px;
    float:left;
    position:relative;


    }

    .sidebar li {
    display:block;
      margin-left:70px;
    }

    .sidebar h3 {
      margin-left:80px;
    }

    .sidebar p {
    margin-top:1px;
      margin-left:10px;
    margin-bottom:2px;

    }

Answer 1

发生这种情况是因为您已经 BODY TAG min-width:1000px;尝试将其增加到min-width:1400px;。

难道你不希望这种反应？如果是，您肯定需要更改HTML的结构

在窗口调整大小期间，信息向下移动到左边的div

1 个答案: