Question

我使用bootstrap，我想将父级中的三个div对齐而没有任何边框：

  <div id="parent" class="col-lg-12">
      <div id="main"> ... </div>
      <div id="leftside"> ... </div>
      <div id="bottom"> ... </div>
  </div>

div #bottom：从左到右填充父div的底部，高度为：100px

div #leftide：从顶部填充左侧到div＃bottom with 100px

div #main：填充其余的父div

更新我的问题不够准确。我想要这样的事情： jsfiddle.net/kvs72e2j 但没有固定的财产。我希望div能够填充父级，而父级必须填写它的超级父级，而不是窗口。

Answer 1

html：

<div id="parent" class="col-lg-12">
<div id="top">
  <div id="leftside"> ... </div>
  <div id="main"> ... </div>
</div>
  <div id="bottom"> ... </div>

css：

#parent {
    position: relative;
    background-color: black;
}

#top {
    padding-bottom: 100px;
}

#leftside {
    background-color: red;
    float: left;
    width: 100px;
}

#main {
    background-color: blue;
}

#bottom {
    background-color: green;
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
}

我刚才意识到我让它变得不必要地复杂化了。这是一个更简单的解决方案： HTML：

  <div id="parent" class="col-lg-12">
    <div id="leftside"> ... </div>
      <div id="main"> ... </div>
      <div id="bottom"> ... </div>
  </div>

css：

#parent {
    background-color: black;
}

#leftside {
    float: left;
    min-width: 100px;
    background-color: red;
}

#main {
    background-color: blue;
}

#bottom {
    clear: both;
    background-color: green;
    height: 100px;
}

如何在父div中对齐div并填充它

1 个答案: