我正在尝试创建一个流畅的布局,但容器的高度有一个小问题。外<div>
(黄色,ip_A-1)没有调整到它的孩子的高度。
在此处查看fiddle。
我已尝试在内部放置一个垫片,但它不起作用。同时使ip_BA_1和ip_BB_1 position:relative
也无效。
HTML :
<div class="ip_A_1">
<div class="ip_BA_1">Hello I am a label that has to wrap</div>
<div class="ip_BB_1">
<div class="ip_BBA_1">Hello I am a text that has to wrap.
Hello I am a text that has to wrap.
Hello I am a text that has to wrap.</div>
</div>
<div class="spacer_0"></div>
</div>
<div class="spacer_0"></div>
<div class="ip_A_1">
<div class="ip_BA_1">Hello I am a label that has to wrap</div>
<div class="ip_BB_1">
<div class="ip_BBA_1">Hello I am a text that has to wrap.
Hello I am a text that has to wrap.
Hello I am a text that has to wrap.</div>
</div>
<div class="spacer_0"></div>
</div>
CSS :
.spacer_0 {
clear:both;
width:100%;
height:0px;
}
.ip_A_1 {
position: relative;
width: 100%;
height: auto;
min-height: 28px;
text-align: left;
font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
font-size:1em;
background: yellow;
}
.ip_BA_1 {
float: left;
width: auto;
padding: 4px 10px 20px 45px;
font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
font-size: 0.88889em;
line-height: 0.88889em;
font-weight: bold;
background: blue;
color: white;
}
.ip_BB_1 {
clear: both;
float: left;
margin-top: -15px;
width: 100%;
}
.ip_BBA_1 {
position: absolute;
left: 30px;
right: 0px;
padding-left: 6px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ccc;
border: 1px solid #666;
}
答案 0 :(得分:2)
问题是你在孩子身上使用花车和position:absolute;
这些规则会阻止孩子扩大父母的身高。
答案 1 :(得分:0)
更改 ip_BBA_1 css位置:relative。