2

我每个旁边有 2 个水平 div。当窗口变小时，我都试图让右侧的 div 缩小，但它会下降到下一行。此外，我希望右侧的 div 能够到达其容器 div 的外边界。

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

JS小提琴

这是代码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%;*/

}

4

1 回答 1

1

嘿现在删除 float left这个类 

#rsfeed .rsfeedinfo

和 add white-space nowrap你的身份证 #rsfeed 一样 

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

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

现场演示

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

于 2012-07-30T11:05:26.530 回答