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

你有很多选择，但这里有2个：
选项 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>

Answer 2

我认为你应该将两个框放在父div中，并为2个子div提供足够的空间，例如：550px。然后向两个子项添加float left属性。请不要对孩子使用绝对位置属性，否则无法工作。

对于每个子div，您可以给出240 px的宽度，并向第二个10 px的左边缘（将它们分开）。它们共享相同的属性非常重要。

代码中的相同解释：

.parentDiv {
width: 550px; 
}

.childRight {
float: left;
width: 240px;    
}

.childLeft {
float: left;
width: 240px;
}

面板CSS的高度

2 个答案: