扩展div中的内容时出错

Question

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

HTML代码

<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

这里使用的是引导的网格！这些网格拥有浮动的属性，这使得它们彼此相邻排列。

根据代码，<div class='user_sec_teams col-md-4'>三个DIVS彼此相邻排列。还有一件事是; “浮动元素不会在意高度。”所以，当你使用浮动网格，你应该适当的安排指定的高度！

你给固定的高度，但

• 实际问题，你说明是背景图像显示出来..！

为此，提供一种背景颜色为母体&使用clearfix 3 <div class='user_sec_teams col-md-4'>后..

添加下面线用于提供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'>本身。