html - 扩展 div 中的内容时出错

Question

我试图通过不定义特定高度来扩展 div 的内容。现在，内容在 div 旁边展开，但显示不正常，因为显示的是背景图像，而不是被 div 覆盖。我该如何解决这个问题？找到附加图像。

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 CODE

.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 的网格。!这些网格具有 float 的属性，使它们彼此相邻排列。!

根据代码，<div class='user_sec_teams col-md-4'>三个DIVS并排排列!还有一件事是； “ float 元素不会关心高度。”所以，当你使用 float 网格时，你应该指定高度以便正确排列。!

你已经给了固定的高度但是

• 实际问题，您说的是背景图片出现了..!

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

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

So your code should look like

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

THEN, CSS property

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