Question

我试图通过不定义特定高度来扩展div的内容。现在，内容正在与div一起扩展，但显示不正常，因为背景图像显示而不是被div覆盖。我该如何解决这个问题？查找附件图片。 enter image description here

HTML CODE

<div class='user_container'>
                <div class='user_sec_teams col-md-4'>
                    <div class='inner_sec'>
                     <ul>
                <span class='points'> Title: </span> {$result['title']}</br>
                <span class='points'> Description: </span> {$result['description']}</br></br>

                <li class='button1' style='color:#A52A2A;'> <a href='' data-toggle='modal' data-target='#{$result['id']}' class='' style=' text-decoration:none; color:#A52A2A;'>Delete Thread</a></li>

                <li class='button2' style='color:#DC143C;'><a href='viewcircle.php?id={$result['id']}' style='text-decoration:none; color:#DC143C;'>View Thread</a></li>    
                     </ul>
                    </div>
              </div>
    </div>

CSS代码

.user_container{
    width: 100%;
    padding-left: 130px;    
}
.user_sec_teams{
width: 350px;
height: 0px;
font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif;
font-size: 15px;
padding-left: 10px;
background: #fff;   
}
.inner_sec img{
 border: 1px solid #ccc;
 height: 70px;
 width: 70px;
}
.inner_sec img{
    vertical-align: middle;
    margin:5px;
}
.inner_sec p{
    background: #eee;
}
.inner_sec ul li{
    list-style: none;
    display: inline;
    left:0;
    position: relative;
    padding: 0;
    margin: 0;
}
.inner_sec ul{
    padding: 0;
    margin: 0;
}
.inner_sec button{
    color: #fff;
    background:deepskyblue;
    outline: none;
    width: 12%;
    height: 3%;
    border: 1px solid deepskyblue;
    border-radius:27px;
    box-shadow: 0px 1px 1px #ccc; 
    cursor: pointer;
    font-weight: bold;
    font-family: georgia;
}
.inner_sec button:hover{
    box-shadow: 0px 0px 3px 3px #ccc;
}

Answer 1

您正在使用bootstrap的网格。这些网格保持浮动的属性，使它们彼此相邻排列。！

根据代码，<div class='user_sec_teams col-md-4'>三个DIVS彼此相邻排列。还有一件事是; ＆＃34;浮动元素不关心高度。＆＃39;因此，当您使用浮动网格时，应指定高度以进行正确排列。！

你给出了固定的高度，但是

实际问题，你说的是背景图片正在出现..！

为此，为父母提供背景颜色＆amp;在三个<div class='user_sec_teams col-md-4'>之后使用clearfix ..

添加以下行以提供clearfix <div class="clearfix"></div>

所以你的代码应该是

<div class='user_sec_teams col-md-4'></div>
<div class='user_sec_teams col-md-4'></div>
<div class='user_sec_teams col-md-4'></div>
<div class="clearfix"></div>
<div class='user_sec_teams col-md-4'></div>
<div class='user_sec_teams col-md-4'></div>
<div class='user_sec_teams col-md-4'></div>
<div class="clearfix"></div>

然后，CSS属性

请为父母提供背景颜色，而不是<div class='user_sec_teams col-md-4'>本身。

在扩展div中的内容时出错

1 个答案: