Question

我创建了一个jquery移动页面，其父div包含2个子div。我希望整个div有一个回圆的颜色。所以我将背景颜色应用于new1 Id。但我无法申请。我在这里附上我的代码

<div id="new1">

       <div id = "c1">

       Welcome 
       </div>

    <div id = "c2">
       <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain" data-mini="true">

        <label for="select-choice-1" class="select"></label> 
                    <select name="select-choice-1" id="select-choice-1" data-theme="a" >


                        <option value="select">Select</option> 
                        <option value="approve">Approve</option> 
                        <option value="reject">Reject</option>
                                        </select></fieldset>

       </div>

       </div>

CSS

#new1
{
background-color:#E32E18;
 position: relative;



}

#c1{
    position: absolute;
    left:0;
    margin-top: 5px;
margin-left:2px;

}



#c2{
    position: absolute;
    right:0;

}

Answer 1

你无法为没有尺寸的东西提供背景颜色：

以下是一个示例：http://jsfiddle.net/Gajotres/bPjLn/

#new1
{
   background-color:#E32E18;
   position: relative;
   width: 300px;
   height: 300px;
}

Answer 2

new1的内容为position:absolute，因此其维度不会应用于new1。

因此，您需要向容器（height: xpx）提供new。

另一种解决方案是使用float而不是定位。

#new1
{
background-color:#E32E18;
position: relative;
}

#c1{
    float: left;
    margin-top: 5px;
    margin-left:2px;
}

#c2{
    float: right;
}

.clearfix{*zoom:1}
.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}
.clearfix:after{clear:both}

演示：Fiddle。

clearfix课程来自Twitter Bootstrap。

父div没有采用背景颜色

2 个答案: