Question

我似乎无法将段落延伸到它的父 div 。通常我认为这适用于width:100%和height:100%，并使其成为display:inline。但我可能在这里遗漏了一些东西。我在谷歌搜索了我的问题（复制粘贴标题），没有结果。

小提琴：http://jsfiddle.net/QuantumHive/D8rUa/

Answer 1

我认为这是你的答案：

.value {
    padding:0;
    margin:0;
    height:100%;
}

从.value删除所有其他属性，并仅将这两个属性放入。

Answer 2

让我们看看我们在这里有什么：

HTML：

<div id="bday">
    <div id="day">
        <p class="value">16</p>
    </div>
    <div id="month">
        <p class="value">december</p>
    </div>
    <div id="year">
        <p class="value">1989</p>
    </div>
</div>

CSS：

#bday {
    width:220px;
    height:220px;
    border:solid 1px black;
    overflow:hidden;
    position:relative;
}
#bday div {
    height:10%;
    border:inherit;
    float:left;
    margin:5px 0px 0px 3px;
    position:relative;
}
#day {
    width:15%;
}
#month {
    width:45%;
}
#year {
    width:25%;
}
.value {
    width:100%;
    height:100%;
    cursor:pointer;
    display: block;
    margin: 0;
    background: red;
}

我们需要将<p>设为display: block;，并为其提供height + width。还要带走margin或它会流出来。

DEMO HERE

Answer 3

如果我能理解，它必须像：http://jsfiddle.net/D8rUa/2/

#bday {
    width:220px;
    height:220px;
    border:solid 1px black;
    overflow:hidden;
    position:relative;
    padding: 5px 0px;
}
#bday div {
    height:100%;
    border:inherit;
    display:inline-block;
    padding-left:3px;
    float:left;
    margin:0px 0px 0px 3px;
    position:relative;
}
#day {
    width:15%;
}
#month {
    width:45%;
}
#year {
    width:25%;
}
.value {
    display:inline;
    width:100%;
    height:100%;
    cursor:pointer;
    position:relative;
}

Answer 4

我认为你缺少的是clearfix。您需要将这段代码放入并为您的类名添加clearfix。

http://davidwalsh.name/css-clear-fix

Answer 5

添加

p.value {
    display:inline-block; /*ammended*/
    margin:0;
    width:100%;
    height:100%;
    cursor:pointer;
    padding-bottom:1000px;/*optional */
    margin-bottom:-1000px; /*optional */
    border:1px solid #CCC;
}

demo

如果您移除padding-left:3px;中的#bday div，左边的间隙也会消失!!

拉伸段落到包含div

5 个答案:

HTML：

CSS：