Question

我试图改变课堂背景颜色的高度。

#myclass{
  background-color: #FFF;
  padding: 25px;
  border: 1px solid #e1e1e1;
  height:auto;
}

<div id="myclass">
  <div class="col-md-4">image</div>
  <div class="col-md-4">text</div>
  <div class="col-md-4">button</div>
</div>

在CSS height:420px工作，但我不想要这样的东西

Answer 1

听起来你有浮动元素的问题。由于.col-md-*元素已浮动，因此#myclass元素没有高度（因此不会显示背景）。 Bootstrap的.col-md-*元素应该包含在class "row"的元素中，我相信这会解决您的问题：

<div id="myclass" class="row">
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
</div>

如果这不是一个选项，您需要添加一个元素来清除那些.col-md-4元素上的浮点数：

<div id="myclass" class="row">
    <div class="col-md-4">...</div>
    ...
    <br style="clear: both">
</div>

Answer 2

解决方案1）如果它是纯色背景 - 您可以将背景添加为图像

#myclass {
background-image:url('pathtoimage/background-image.png');
background-size: 100% 450px;
background-position: left top;
}

解决方案2）通过在#myclass中添加div来添加假背景图像/颜色。

<div id="myclass">
<div class="fake-bg"></div>
<div class="col-md-4">image</div>
<div class="col-md-4">text</div>
<div class="col-md-4">button</div>
</div>

将此添加到您的css：

#myclass {
position:relative;
}
.fake-bg {
position:absolute;
left:0;
top:0;
width:100%;
height:450px;
z-index:-1;
}

Answer 3

.clearfix:before, .clearfix:after {
        content: "";
        display: table;
        line-height: 0;
    }

    .clearfix:after {
        clear: both;
    }

请使用此css并将.clearfix与.ror类放在一起。它会挑衅地工作

改变背景颜色的高度

3 个答案: