html - 面板 CSS 的高度

Question

请问我有这个问题。我有两个 div 并排，但第一个面板是第一个，容器的高度与第二个面板的高度不符。我知道我写得不好，但我不知道更好。感谢您的帮助。

#container {
  font-family: "Roboto", sans-serif;
  width: 1000px;
  border-radius: 1px;
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  padding: 5px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
   margin-top : 50px;

}

#narrow {
    position: relative;
    width: 200px; //may be variable h    
}

#wide {
    position: absolute;
    top: 0;
    left: 50%;
    margin-top: 220px;
    margin-left: -150px; // half the width
    width: 300px; // must be fixed
}

PHOTO WEBSITE

Answer 1

你有很多选择，但这里有两个:
选项1

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */      
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

选项2

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: black;
    padding-bottom: 100%;
    color: white;
    margin-bottom: -100%;
}

<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Little content
    </div>

</div>