水平空间2个div

Question

我有以下设置:

<div id="container">
    <div id="msg"><p>Lorem ipsum dolor sit amet.</p></div>
    <div id="img"><div id="content"></div></div>
</div>
#container{
    position:absolute;
    width:182px;
    height:60px;
}
#msg{
    width:95px;
    height:60px;
    float:left;
    display: table; 
    background:#666;
}
#msg p{
    font-size:13px;
    color:#eee;
    text-align: center;
    vertical-align: middle;
    display: table-cell;   
}
#img{
    width:87px;
    height:60px;
    float:right;
    background:#333;
}
#content{
    position:absolute;
    top:7px;
    width:80px;
    height:45px;
    background:#ccc;
}

我想当div被隐藏时(display:none)div msg得到父元素的100%宽度。但是文本需要保持居中。

http://jsfiddle.net/ELKQg/801/

Answer 1

显示:table;这是一个好主意，但这些规则应该分配给主容器和它的两个子容器，以便有效地实现您的目标。

悬浮在演示中隐藏#img，看到#msg填充#container的整个宽度:

#container {
    display:table;
    width:182px;
    height:60px;
}
#msg {
    width:95px;
    display: table-cell;
    vertical-align: middle;
    background:#666;
    text-align: center;
}
#msg p {
    font-size:13px;
    color:#eee;
}
#img {
    width:87px;
    vertical-align:middle;
    display: table-cell;
    background:#333;
}
#container:hover #img {
    display:none;
}
#content {
    width:80px;
    height:45px;
    background:#ccc;
}

Answer 2

我想更改消息宽度可能会起作用:

$("#msg").on('click', function(){
    $("#img").css('display', 'none');
    $("#msg").css('width', '100%');
});

Answer 3

嗨，这是可能的jquery。我已经添加了脚本，将解决这个问题。为了测试，我添加了display:none;

<style type="text/css" >
#container{
    position:absolute;
    width:182px;
    height:60px;
}
#msg{
    width:95px;
    height:60px;
    float:left;
    display: table; 
    background:#666;
}
#msg p{
    font-size:13px;
    color:#eee;
    text-align: center;
    vertical-align: middle;
    display: table-cell;   
}
#img{
    width:87px;
    height:60px;
    float:right;
    background:#333;
    display:none;
}
#content{
    position:absolute;
    top:7px;
    width:80px;
    height:45px;
    background:#ccc;
}
.w100{
    width:100% !important;
}
</style>
<div id="container">
    <div id="msg"><p>Lorem ipsum dolor sit amet.</p></div>
    <div id="img"><div id="content"></div></div>
</div>
<script language="javascript" >
if ($('#img').css('display') == 'none') {
    $( "#msg" ).addClass( "w100" );
}
</script>

Answer 4

这是另一个不需要jquery的解决方案，但你需要改变结构。

<style type="text/css" >
#container{
    position:absolute;
    width:182px;
    height:60px;
}
#msg{
    width:100%;
    height:60px;
    float:left;
    display: table; 
    background:#666;
}
#msg p{
    font-size:13px;
    color:#eee;
    text-align: center;
    vertical-align: middle;
    display: table-cell;   
}
#img{
    width:87px;
    height:60px;
    float:right;
    background:#333;
    display:none;
}
#content{
    position:absolute;
    top:7px;
    width:80px;
    height:45px;
    background:#ccc;
}
</style>
<div id="container">
    <div id="msg">
        <p>Lorem ipsum dolor sit amet.</p>
        <div id="img"><div id="content"></div></div>
    </div>
</div>