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あなたのIDで #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 に答える