面板CSS高度

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

#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

来源

2017-02-16 user2622950

你能解释一下这个问题有点多。我无法正确理解它。该图像没有帮助。 – Aslam

你可以添加两个div和父级的HTML代码片段吗？我猜你想让这两个div的高度一致吗？ – Gezzasa

为了使问题更加清楚，请在问题“第一个”和“第二个”中用适当的id -s代替：#narrow和#wide – Banzay

你有很多选择，但这里有2人：
选项

.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>

选项

.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>

来源

2017-02-16 10:21:01 bens

不错，这是我想要的。谢谢！ – user2622950

我想你应该把两个框父DIV中有足够的空间为2个孩子的div，例如像：550px。然后给两个孩子添加一个float左属性。请不要对孩子使用绝对位置属性，否则将无法使用。

对于每个孩子div你可以给240宽度和第二个10 px的边缘左边（将它们分开）。他们共享相同的属性是很重要的。在代码

相同的解释：

.parentDiv { 
width: 550px; 
} 

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

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

来源

2017-02-16 10:26:36 randseed1724

如果你不明白这个问题，你不应该回答。改写问题的评论。这是一个非常糟糕的答案。 –

@ Reality-Torrent它实际上起作用，它不是一个可怜的答案。 – randseed1724

你的答案拼写错误，语法不好。没有代码存在，你在答案中清楚地表明你自己并不知道OP要求什么。我会说这是一个非常糟糕的答案。 –

面板CSS高度

回答

相关问题