Question

我每个旁边都有2个水平div。我试图让右侧的div缩小，因为窗口变得更小但是它下降到下一行。此外，我希望右边的div到达其容器div的外边框。

我唯一的成功是如果在右侧div上放置一个百分比宽度，但它确实触及了容器边框。

这是代码 HTML

<div id="container">
<div id="rsfeed">
                            <div class="rsfeedlabel">RSS Stream</div>
                            <div class="rsfeedinfo ofh">
                                <table class="rsfeedtbl">
                                    <tr>
                                        <td>otam rem aperiam, eaque ipsa quae ab - Illo inventore veritatis et quasi rem aperiam, eaque ipsa inventore veritatis et quasi rem </td>
                                    </tr>
                                </table>
                            </div>
</div>

</div>

CSS

#container {
    width: 90%;
    border:1px solid black;
    height:100px;
}

#rsfeed {font-family: Arial;position: relative;overflow: hidden;}

#rsfeed .rsfeedlabel {
    float: left;
    border: 1px solid #727272;
    height: 24px;
    line-height: 24px;
    background: grey;
    margin-top: 20px;
    color:  white;
    font-family: Arial;
    vertical-align: middle;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 75%;
    text-shadow: 1px 1px 1px #000;

}

#rsfeed .rsfeedinfo {
    float: left;
    height: 24px;
    line-height: 24px;
    border-right: 1px solid #b9b8b8; border-top: 1px solid #b9b8b8; border-bottom: 1px solid #b9b8b8;
    margin-top: 20px; 
    font-size: 75%;
    vertical-align: middle;
    font-family: Arial;
    white-space: nowrap;
    overflow: hidden;
    /*width:80%;*/

}

Answer 1

嘿现在删除 float left 类

#rsfeed .rsfeedinfo

ID add white-space nowrap中的

和 #rsfeed 就像这样

    #rsfeed .rsfeedinfo {
    float:left;  // remove this line
    }

#rsfeed {
white-space:nowrap; //add this line
}

现场演示

http://jsfiddle.net/MdJBP/4/

窗口缩小时缩小div

1 个答案: