如何实现CSS多Div同高度且始终并排显示？

Hey there! Let's get your layout sorted out. The issue you're facing is that inline-block doesn't enforce equal heights for child elements, and it can cause alignment quirks when content lengths vary. Here are two solid solutions using modern CSS layouts that will fix this for good:

Solution 1: Use Flexbox (Most Recommended) #

Flexbox is built for exactly these kinds of layout problems—it automatically makes child elements stretch to match the height of the tallest one, and keeps them side-by-side effortlessly.

Updated CSS: #

.employee-container {
  width: 820px;
  min-width: 300px;
  display: flex; /* Replace inline-block with flex */
  background: white;
  border: 1px solid #e0e0e0;
  margin: 5px 0 7% 20px;
  padding: 20px 10px 10px 20px;
  font-size: 16px;
}

.employee-container div {
  flex: 1; /* Makes each div take equal space in the flex container */
  /* Optional: Add padding between the two divs */
  padding-right: 20px;
}

/* Remove the last div's padding to avoid extra space on the right */
.employee-container div:last-child {
  padding-right: 0;
}

.employee-container p {
  font-weight: bold;
}

Fix Your JSX Structure #

Also, notice you're using <li> elements without a parent <ul> or <ol>—this is invalid HTML and can cause unexpected layout behavior. Let's fix that:

<div className='employee-container'>
  <div>
    <span>Betrokken medewerkers: </span>
    <ul> {/* Add unordered list wrapper */}
      {project.employees.map((employee, index) => (
        <li key={index}>{employee}</li> {/* Always add a key to mapped elements */}
      ))}
    </ul>
  </div>
  <div>
    <span>project managers: </span>
    <ul> {/* Add unordered list wrapper here too */}
      <li>{project.projectManager}</li>
    </ul>
  </div>
</div>

Solution 2: Use CSS Grid #

If you prefer Grid, it's just as effective. Grid lets you define columns explicitly, and child elements will automatically match heights:

Updated CSS for Grid: #

.employee-container {
  width: 820px;
  min-width: 300px;
  display: grid; /* Use grid instead of inline-block */
  grid-template-columns: 1fr 1fr; /* Split into two equal columns */
  gap: 20px; /* Add space between columns */
  background: white;
  border: 1px solid #e0e0e0;
  margin: 5px 0 7% 20px;
  padding: 20px 10px 10px 20px;
  font-size: 16px;
}

.employee-container p {
  font-weight: bold;
}

This will also keep your two divs side-by-side with identical heights, no matter how much content is in each one.

Why Your Original Code Didn't Work #

inline-block aligns elements to their baseline (not the top) and doesn't force equal heights. If one div has more content, it will stretch vertically, but the other will stay at its content height—leading to misaligned boxes. Flexbox and Grid handle this automatically by default.

内容的提问来源于stack exchange，提问作者Kevin.a