窗口缩放时.sidebar div下移至.info div下方的布局问题求助

Hey there! I notice your sidebar is dropping below the .info div when you scale the window, even though you're using float layout. Let's figure out why this is happening and get it fixed—plus I'll show you a more modern approach that'll make this kind of layout way easier to maintain.

What's Causing the Problem? #

Your current setup has a few small issues that add up to the sidebar wrapping:

• The min-width values for .info (60%) and .sidebar (30%) plus the .sidebar's margin-left:5px can push the total width over the parent container's available space when the window shrinks.
• There's a syntax error in .info with padding:left:0 (should be padding-left:0), which might be throwing off spacing calculations.
• The .info img uses position:fixed which yanks it out of the document flow, messing with how the .info div's space is calculated.

Solution 1: Tweak the Float Layout #

If you want to stick with float, here's how to adjust your code to keep the sidebar in place:

First, fix the CSS to ensure total width stays within bounds and correct those small errors:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Critical: makes padding/border count toward element width */
}
body {
  font: bold 1.1em Courier;
  max-width: 1600px;
  min-width: 1000px;
  margin: auto;
  overflow: hidden; /* Clears floats so the body wraps its floated children */
}
header ul li{
  width: 22%; /* Adjusted to fit 4 items evenly with spacing */
  margin-top: 4px;
  float: left;
  margin-right: 3%; /* Percentage-based spacing for consistency */
  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;
  overflow: hidden; /* Clears floats inside the header */
}
a {
  text-decoration: none;
  color: #888888;
}
.info {
  width: 69%; /* Leaves 1% gap for spacing */
  margin-top: 30px;
  height: 800px;
  float: left;
  background-color: #E8E8E8;
  padding-left: 0; /* Fixed syntax error */
}
.info p {
  width: 30%;
  float: left;
  line-height: 3em;
  margin-top: 50px;
  margin-left: 100px;
}
.info img {
  float: right; /* Removed position:fixed to keep it in the document flow */
  width: 200px;
  height: 200px;
  margin-top: 60px;
  margin-right: 150px; /* Adjusted to margin-right for right float */
  border-radius: 50%;
}
.sidebar {
  width: 30%;
  margin-top: 30px; /* Matched .info's top margin for alignment */
  float: left;
  margin-left: 1%; /* Consistent percentage gap */
}
.sidebar li {
  display: block;
  margin-left: 70px;
}
.sidebar h3 {
  margin-left: 80px;
}
.sidebar p {
  margin-top: 1px;
  margin-left: 10px;
  margin-bottom: 2px;
}

Solution 2: Use Flexbox (Recommended) #

Float layout is old-school and prone to these kinds of issues. Flexbox is a modern CSS layout tool that makes side-by-side layouts stable and easy to adjust. Here's how to rewrite your layout with flex:

First, update your HTML to wrap .info and .sidebar in a container:

<div class="main-container">
  <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>
</div>

Then replace your CSS with this flex-based version:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font: bold 1.1em Courier;
  max-width: 1600px;
  min-width: 1000px;
  margin: auto;
}
header ul {
  display: flex; /* Makes navigation items line up nicely */
  justify-content: space-around; /* Evenly spaces the nav links */
}
header ul li{
  flex: 1; /* Each nav item takes equal width */
  margin-top: 4px;
  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;
}
.main-container {
  display: flex; /* Makes .info and .sidebar sit side-by-side */
  gap: 1%; /* Adds space between main content and sidebar */
  margin-top: 30px;
}
.info {
  flex: 7; /* Takes up 70% of the container space */
  height: 800px;
  background-color: #E8E8E8;
  display: flex; /* Arranges text and image inside .info */
  align-items: center; /* Vertically centers content */
  padding: 0 100px;
}
.info p {
  flex: 1; /* Text takes available space */
  line-height: 3em;
}
.info img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-left: 50px;
}
.sidebar {
  flex: 3; /* Takes up 30% of the container space */
}
.sidebar li {
  display: block;
  margin-left: 70px;
}
.sidebar h3 {
  margin-left: 80px;
}
.sidebar p {
  margin-top: 1px;
  margin-left: 10px;
  margin-bottom: 2px;
}

Why Flexbox is Better #

Flexbox handles spacing and alignment automatically, so you won't have to worry about elements wrapping unexpectedly. It's also easier to adjust if you want to make the layout responsive later.

内容的提问来源于stack exchange，提问作者Aaron B