html - CSS 收缩

Question

嗨，我在使用 css 面板时遇到了一些问题，我有点想寻求帮助，我的代码运行良好，但是如果用户让浏览器缩小尺寸，面板就会出现在文本下面，这就是我的意思意思是:

这是正常浏览器大小下的样子:

如果用户将浏览器尺寸缩小，这就是它的样子:

至少文本被 css 面板重叠会很好，我希望它换行但它不起作用...

英雄是 HTML :

<div class"center"
    <div class="story">
 <div class="full-story">
  <table width="100%" cellspacing="0" padding="0" border="0">
   <tbody><tr>
    <td>
      </td>
   </tr>
   </tbody></table>
     </div>
     <div class="fullstory">
     <div class="imbd"><img src="{THEME}/dleimages/game.png"/></div><span class="imbdrate">[xfvalue_gamescore]</span>
    <div class="fullstory-posterfull">
            <div>[full-link]<img src="{image-1}" alt="{title}" />[/full-link]</div>
    </div>
    <div class="pos">
    <div id="content" class="post_single" role="main">



                            <div class="post_reviews theme_regular">
                                <ul role="tablist" class="tabs theme_field"><li  tabindex="0"  class="ui-state-default ui-corner-top ui-tabs-active ui-state-active"><a  href="http://[xfvalue_gsite]" class="theme_button">[xfvalue_author]</a></li><li aria-selected="false"  aria-controls="reviews_users" tabindex="-1" role="tab"><a tabindex="-1" role="presentation" href="#reviews_users" class="theme_button ui-tabs-anchor">[xfvalue_release]</a></li></ul>
            <div class="reviews_data">

                <div class="criteria_row theme_field">
                    <input name="reviews_marks_author[]" value="4" type="hidden">
                    <span class="criteria_label theme_strong">OS</span>[xfvalue_os]
                </div>

                <div class="criteria_row theme_field">
                    <input name="reviews_marks_author[]" value="4" type="hidden">
                    <span class="criteria_label theme_strong">Game size</span>[xfvalue_size]
                </div>

                <div class="criteria_row theme_field">
                    <input name="reviews_marks_author[]" value="5" type="hidden">
                    <span class="criteria_label theme_strong">Video Card</span>[xfvalue_vcard]
                </div>

                <div class="criteria_row theme_field">
                    <input name="reviews_marks_author[]" value="4" type="hidden">
                    <span class="criteria_label theme_strong">Genre(s)</span>[xfvalue_genre]
                </div>

                <div class="criteria_row theme_field">
                    <input name="reviews_marks_author[]" value="5" type="hidden">
                    <span class="criteria_label theme_strong">Mode(s)</span>[xfvalue_mode]
                </div>

            </div>
            <div class="reviews_summary blog_reviews">
                <div class="criteria_summary_text criteria_row theme_field"><p class="sammorryp">[xfvalue_minisum]
</div>
                <div class="criteria_summary criteria_row theme_field">
                    <span class="criteria_label theme_strong">[xfvalue_age]</span>=
                    <span class="stars_off">
                </span></span>
                    <span class="criteria_mark theme_accent_bg">[xfvalue_score]</span>
                </div>
            </div>
        </div>
        </div>
<table class="tab">
    <tbody><tr>
    <td><div class="fullstory-content"></div></td>
    </tr>
            <tr>
            <div class="flo">
    <td><div class="fullstory-title"><span class="moviedesctit">Game description:</span></div></td>
    </tr>
            <tr>
    <td><div class="movdiv"><span class="moviedesc">[xfvalue_gamedesc]</span></div>
    </div>
            </td>
   </tr>
   </div>
   </tbody></table>
   <br>

这是 CSS:

.fullstory {overflow:hidden;}
.fullstory-title {color:#182131; font-size:14px; padding:0px 0 10px 10px; text-transform:uppercase;}
.fullstory-posterfull {border-collapse: separate;border-spacing: 0px;float:left; overflow:hidden; max-height:600px; border:1px solid #ccc;}
.fullstory-posterfull img {max-height:600px; max-width:600px; width:350px;z-index: 1;}
.fullstory-posterfull-info {margin:15px 0 0 10px; line-height:22px; float: right;}
.fullstory-info {float:left; margin:0 0 15px 25px; width:500px;}
.fullstory-info h1 {padding:0 0 5px 9px; font-size:20px; color:#FD821F; letter-spacing:-0.04em; text-transform:uppercase; font-weight:normal;}
.fullstory-info-fields {margin-bottom:5px;}
.fullstory-info-fields > div {border-bottom:1px solid #ddd; color:#2C2C2C; font-weight:bold; padding:5px 6px 5px 11px; position:relative; width:315px;}
.fullstory-info-fields > div > div {display:block; float:left; width:60px;}
.fullstory-info-fields > div > span {display:inline-block; font-weight:normal; margin-left:20px; width:130px;}
.fullstory-banner {width:20px; padding:10px; margin:5px 0 0 0; position:relative;}
.fullstory-service {overflow:hidden; margin:15px 0 15px 0;}
.imgstyle{border:1px solid #38576B;}
.center {
float:center;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    background-color: #b0e0e6;
}

.imbd{
display:block;
position:absolute;
top: 420px; 
left: 350px;
overflow:hidden;
z-index: 10;
}

.imbdrate{
font-size:large;
font-weight:bold;
text-indent:1px;
color:#0067d9;
display:block;
position:absolute;
top: 424px;
left: 390px;
overflow:hidden;
z-index: 10;
}

.movdiv{
width: 500px;
 margin-bottom:-300px;
}

.moviedesc:first-letter{
               text-transform: uppercase;
          }
        .moviedesc {
        position: relative; 
        top: -290px;
        white-space: pre-wrap;
        color: #424242;
        font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
    letter-spacing:0.1em;
    text-align:center;
    margin:50px auto;
    text-transform: lowercase;
    line-height: 135%;
    font-size: 11pt;
    font-variant: small-caps;
        }

        .moviedesctit:first-letter{
               text-transform: uppercase;
          }
        .moviedesctit {
        position: relative; 
        top: -300px;
        white-space: pre-wrap;
        font-weight:bold;
        color: #424242;
        font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
    letter-spacing:0.1em;
    text-align:center;
    margin:50px auto;
    text-transform: lowercase;
    line-height: 145%;
    font-size: 12pt;
    font-variant: small-caps;
        }



.sammorryp{
padding: 5px 0 5px 0;
width:270px; 
 line-height: 13px; 
 text-indent: 13px; 
 margin: 0;
 font-family: helvetica,sans-serif;
color: #9C9C9C;
font-size: 12px;
font-weight: bold;
font-style: italic;
text-align: center;
letter-spacing: 0.4pt;
word-spacing: 0.2pt;
line-height: 2.2;
}

/* Tabs */
.tabs,
.widget ul.tabs {
    position:relative;
    margin:0;
    padding:0;
    list-style:none;
}
.tabs li,
.widget .tabs li {
    display:inline-block;
    margin:0 1px 0 0;
    padding:0;
}
.tabs li:before,
.widget .tabs li:before {
    display:none;
}
.tabs li a,
.widget .tabs li a {
    height:40px;
    line-height:40px;
    padding:0 10px;
    display:inline-block;
    text-align:center;
    text-transform:uppercase;
}


/* Page navigation*/
#nav_pages,
#nav_pages_parts {
    overflow: hidden;
    clear: both;
    margin-top: 1px;
    padding:30px 20px;
}
#nav_pages ul {
    margin: 0;
    overflow: hidden;
}
#nav_pages li {
    margin-right: 5px;
    list-style: none;
    float: left;
}
#nav_pages li a,
#nav_pages li span,
.nav_pages_parts a,
.nav_pages_parts > span,
.nav_comments a,
.nav_comments > span {
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -ms-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s;   
    text-decoration: none;
    text-align:center;
    display: inline-block;
    width:36px;
    height:36px;
    line-height:36px;
}
.nav_pages_parts {
    margin: 10px  0;
}
.nav_pages_parts > span.pages {
    text-align:left;
    width:auto;
}
#nav_pages .pager_pages span {  
    width:90px; 
    text-align:left;
}
#nav_pages .pager_first a,
#nav_pages .pager_last a {
    width:60px; 
}
.nav_pages_parts.nav_pages_attachment {
    text-align:center;
    margin:1px 0 0 0;
}
.nav_pages_parts.nav_pages_attachment > span {
    margin-right:1px;
}
.nav_pages_parts.nav_pages_attachment a,.nav_pages_parts.nav_pages_attachment > span {
    vertical-align:top;
    width:100px;
}


/* View more button */
#viewmore {
    clear:both;
    margin:0 auto;
    padding-top:20px;
    padding-bottom:20px;
    width: 310px;
    overflow:hidden;
}
#viewmore.pagination_infinite {
    visibility:hidden;
    padding:0;
    height:0;
    position:relative;
}
#viewmore_link {
    display:block;
    width:100%;
    height:54px;
    line-height:54px;
    text-align:center;
    text-transform:uppercase;
}
#viewmore_link span {
    display:inline-block;
}
#viewmore_link .viewmore_loading {          display:none; margin-right:10px; }
#viewmore_link .viewmore_loading:before {   font-size: 16px; }
#viewmore_link.loading .viewmore_loading {  display:inline-block; }
#viewmore_link.loading .viewmore_text_1 {   display:none; }
#viewmore_link .viewmore_text_2 {           display:none; }
#viewmore_link.loading .viewmore_text_2 {   display:inline-block; }

#content article.viewmore {
    animation: zoomin .5s;
}


/* Tabs */
.theme_regular .ui-tabs-active .theme_button {
border-collapse: separate;
border-spacing: 0px;
    background:#00bcff;
    color:#ffffff;  
}
.theme_regular .sc_tabs .content {
    background: #fff;
    border-color: #e0e0e0;
}

/* Team */
.theme_regular .sc_team .sc_team_item {
    background: #f0f0f0;
}

/* Testimonials */
.theme_regular .sc_testimonials .sc_testimonials_position {
    color:#aaaaaa;
}
.theme_regular .sc_testimonials.sc_testimonials_style_flat .sc_testimonials_content {
    background:#f0f0f0;
}
.theme_regular .sc_testimonials.sc_testimonials_style_callout .sc_testimonials_content {
    background:#9b9b9b;
    color:#ffffff;
}
.theme_regular .sc_testimonials.sc_testimonials_style_callout .sc_testimonials_extra {
    background: #565656;
}
.theme_regular .sc_testimonials.sc_testimonials_style_callout .sc_testimonials_extra .sc_testimonials_extra_inner {
    border-color:transparent transparent #ffffff #ffffff;
}

/* Title */
.theme_regular .sc_title_bubble_top .sc_title_bubble_icon,
.theme_regular .sc_title_bubble_left .sc_title_bubble_icon {
    background-color:#00bcff;
    color:#ffffff;
}
.theme_regular .sc_title_underline:after {
    border-bottom-color:#00bcff;
}

/* Toggles */
.theme_regular .sc_toggles .sc_toggles_item .sc_toggles_title a span.sc_toggles_icon {
    background: #666666;
    color:#ffffff;
}
.theme_regular .sc_toggles .sc_toggles_item .sc_toggles_title.ui-state-active a span.sc_toggles_icon {
    background: #00bcff;
}
.theme_regular .sc_toggles .sc_toggles_item .sc_toggles_title.ui-state-active a {
    color:#00bcff;
}
.theme_regular .sc_toggles .sc_toggles_item .sc_toggles_title a:hover {
    color:#bbbbbb;
}
.theme_regular .sc_toggles .sc_toggles_item .sc_toggles_title a:hover span.sc_toggles_icon {
    background: #bbbbbb;
    color:#666666;
}


/* Form fields
---------------------------------------------------*/
.theme_regular #buddypress .button,
.theme_regular #buddypress .generic-button a,
.theme_regular #buddypress form input[type="button"],
.theme_regular #buddypress form input[type="reset"],
.theme_regular #buddypress form input[type="submit"],
.theme_regular.bbpress #bbpress-forums form input[type="button"],
.theme_regular.bbpress #bbpress-forums form input[type="submit"],
.theme_regular.bbpress #bbpress-forums form input[type="reset"],
.theme_regular button,
.theme_regular html input[type="button"],
.theme_regular input[type="reset"],
.theme_regular input[type="submit"] {
    border-color:transparent;
    border-width:0;
    background:#666666;
    color:#ffffff;  
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -ms-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s;
    cursor: pointer;
}
.theme_regular #buddypress .button:hover,
.theme_regular #buddypress .generic-button a:hover,
.theme_regular #buddypress form input[type="button"]:hover,
.theme_regular #buddypress form input[type="reset"]:hover,
.theme_regular #buddypress form input[type="submit"]:hover,
.theme_regular.bbpress #bbpress-forums form input[type="button"]:hover,
.theme_regular.bbpress #bbpress-forums form input[type="submit"]:hover,
.theme_regular.bbpress #bbpress-forums form input[type="reset"]:hover,
.theme_regular button:hover,
.theme_regular html input[type="button"]:hover,
.theme_regular input[type="reset"]:hover,
.theme_regular input[type="submit"]:hover {
    background:#bbbbbb;
    color:#ffffff;  
}
.theme_regular #buddypress .button:focus,
.theme_regular #buddypress .generic-button a:focus,
.theme_regular #buddypress form input[type="button"]:focus,
.theme_regular #buddypress form input[type="reset"]:focus,
.theme_regular #buddypress form input[type="submit"]:focus,
.theme_regular.bbpress #bbpress-forums form input[type="button"]:focus,
.theme_regular.bbpress #bbpress-forums form input[type="submit"]:focus,
.theme_regular.bbpress #bbpress-forums form input[type="reset"]:focus,
.theme_regular button:focus,
.theme_regular html input[type="button"]:focus,
.theme_regular input[type="reset"]:focus,
.theme_regular input[type="submit"]:focus,
.theme_regular button:active,
.theme_regular html input[type="button"]:active,
.theme_regular input[type="reset"]:active,
.theme_regular input[type="submit"]:active {
    background:#bbbbbb;
    color:#ffffff;  
}
.theme_regular #buddypress form textarea,
.theme_regular #buddypress form#whats-new-form textarea,
.theme_regular #buddypress form select,
.theme_regular #buddypress form input[type="file"],
.theme_regular #buddypress form input[type="text"],
.theme_regular #buddypress form input[type="search"],
.theme_regular #buddypress form input[type="email"],
.theme_regular #buddypress form input[type="number"],
.theme_regular #buddypress form input[type="checkbox"],
.theme_regular #buddypress form input[type="radio"],
.theme_regular #buddypress form input[type="password"],
.theme_regular .theme_field,
.theme_regular blockquote,
.theme_regular input[type="text"],
.theme_regular input[type="number"],
.theme_regular input[type="email"],
.theme_regular input[type="password"],
.theme_regular input[type="search"],
.theme_regular select,
.theme_regular textarea {
    background: #dddddd;
    border-width:0;
    color: #666666;
}
.theme_regular #buddypress form textarea:focus,
.theme_regular #buddypress form#whats-new-form textarea:focus,
.theme_regular #buddypress form select:focus,
.theme_regular #buddypress form input[type="file"]:focus,
.theme_regular #buddypress form input[type="text"]:focus,
.theme_regular #buddypress form input[type="search"]:focus,
.theme_regular #buddypress form input[type="email"]:focus,
.theme_regular #buddypress form input[type="number"]:focus,
.theme_regular #buddypress form input[type="checkbox"]:focus,
.theme_regular #buddypress form input[type="radio"]:focus,
.theme_regular #buddypress form input[type="password"]:focus,
.theme_regular .theme_field:focus,
.theme_regular input[type="text"]:focus,
.theme_regular input[type="number"]:focus,
.theme_regular input[type="email"]:focus,
.theme_regular input[type="password"]:focus,
.theme_regular input[type="search"]:focus,
.theme_regular select:focus,
.theme_regular textarea:focus {
    background: #cccccc;
    color: #666666;
}

/* Color theme: 'Regular' */

/* Page Body background */
.theme_regular.theme_body, .theme_regular .theme_body {
    background:#f0f0f0;
}

/* Article background */
.theme_regular.theme_article, .theme_regular .theme_article {
    color:#666666;
    background:#ffffff;
}

/* Text color */
.theme_regular p, .theme_regular td, .theme_regular th, .theme_regular input, .theme_regular textarea, .theme_regular div,
.theme_regular .theme_text {
    color:#666666;
}

/* Headers color */
.theme_regular h1, .theme_regular h2, .theme_regular h3,
.theme_regular .theme_title, .theme_regular .theme_header {
    color:#222222;
}

/* SubHeaders color */
.theme_regular h4, .theme_regular h5, .theme_regular h6,
.theme_regular .theme_subtitle, .theme_regular .theme_subheader {
    color:#222222;
}

/* Strong text */
.theme_regular .theme_strong {
    color:#222222;
}

/* Info text - post date, author, comments etc. */
.theme_regular .theme_info {
    color:#aaaaaa;
}

/* Links (as text) */
.theme_regular a,
.theme_regular .theme_link {
    color:#00bcff;
}

/* Links (as text) hover */
.theme_regular a:hover,
.theme_regular .theme_link:hover {
    color:#bbbbbb;
}

/* Links (as button) */
.theme_regular a.more-link,
.theme_regular a.comment-reply-link,
.theme_regular .theme_button {
    background:#666666;
    color:#ffffff;  
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -ms-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s;
}

/* Links (as button) hover */
.theme_regular a.more-link:hover,
.theme_regular a.comment-reply-link:hover,
.theme_regular a.theme_button:hover,
.theme_regular a.theme_accent_bg:hover,
.theme_regular .theme_hover {
    background:#bbbbbb;
    color:#ffffff;  
}

/* Border color */
.theme_regular fieldset,
.theme_regular .theme_border {
    border-color:#e0e0e0 !important;
}

/* Accent color */
.theme_regular .theme_accent_bg {
    background:#00a0db;
    color:#ffffff;
}
.theme_regular .theme_accent {
    color:#00a0db;
}
.theme_regular .theme_accent_border {
    border-color:#00a0db;
}

/* Reviews area */
.post_reviews {
border-collapse: separate;
border-spacing: 0px;
    width: 310px;
    float:right;
    position:relative;
    margin:24px -16px 10px 20px;
    overflow:hidden;
    font-size:14px;
    z-index:1;
}
.post_reviews .tabs {
    padding:15px 15px 0 15px;
}
.post_reviews #reviews_users {
    display:none;
}

.post_reviews .criteria_row {
    overflow: hidden;
    margin-bottom:1px;
    padding:12px 0 12px 12px;
    position:relative;
}
    .criteria_row .criteria_label {
        display:inline-block;
        width:150px;
        margin-right:10px;
        overflow:hidden;
    }
    .reviews_100 .criteria_row .criteria_label {
        width: 130px;
        margin-right:6px;
    }
    .blog_reviews .criteria_row .criteria_stars {
        display: inline-block;
        width: 120px;
        height: 28px;
        overflow: hidden;
    }
    .reviews_10 .blog_reviews .criteria_row .criteria_stars {
        width:124px;
        height:20px;
    }
    .criteria_row .criteria_stars {
        display:inline-block;
        font-size:22px;
        white-space:nowrap;
        position:relative;
        vertical-align:top;
    }
    .reviews_users .criteria_row .criteria_stars {
        cursor:pointer;
    }
    .criteria_row .criteria_stars .theme_stars:before {
        content:'\e801';
        font-family:Fontello;
        -webkit-font-smoothing: antialiased;
        display:inline-block;
        margin-right:5px;
    }
    .reviews_10 .criteria_row .criteria_stars .theme_stars:before {
        margin-right:0;
        font-size:14px;
        vertical-align:top;
    }
    .reviews_100 .criteria_row .criteria_stars {
        min-height:0;
        height:10px;
        width:86px;
        vertical-align:text-top;
        line-height:10px;
        font-size:10px;
    }
    .criteria_row .criteria_dragger {
        display:block;
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        width:10px;
        background-color:#69F;
    }
    #reviews_author .criteria_row .criteria_dragger {
        display:none;
    }
    .criteria_row .criteria_bar {
        display:inline-block;
        width:80px;
        height:4px;
        margin-left:3px;
        margin-top:-2px;
        vertical-align:middle;
        text-align: left;
    }
    .criteria_row .criteria_level {
        display:inline-block;
        height:4px;
        width:0;
        vertical-align:top;
    }
    .criteria_row .criteria_mark, 
    .reviews_summary .criteria_summary .criteria_word {
        display:block;
        position:absolute;
        right:0;
        top:0;
        bottom:0;
        width:50px;
        text-align:center;
        font-weight:bold;
        font-size:18px;
        padding-top:12px;
        color:#ffffff;
    }
    .reviews_5 .criteria_row .criteria_mark,
    .reviews_10 .criteria_row .criteria_mark {
        display:none;
    }
    .reviews_100 .post_reviews .reviews_summary .criteria_summary > .theme_stars_on {
        display:none;
    }



/* Reviews Summary */
.reviews_summary.blog_reviews {
    overflow:hidden;
    margin:5px 0 0 0;
}
#content.post_single .reviews_summary.blog_reviews {
    margin:0px 0px 0 0;
    float:center;
}
.reviews_10 .reviews_summary .criteria_label {
    margin-right:6px;
}

.reviews_summary .criteria_summary {
    position:relative;
}
.reviews_summary .criteria_summary_text.criteria_row {
    height:auto;
    font-size:12px;
    line-height:16px;
    padding-top:12px;
    padding-bottom:12px;
}
.reviews_summary .criteria_label {
    text-transform:uppercase;
    display:inline-block;
    height:28px;
    line-height:32px;
}
.reviews_summary .criteria_stars {
    top:4px;
}
.reviews_10 .reviews_summary .criteria_stars {
    top:0;
}
.reviews_summary .criteria_stars .stars_on,
.reviews_summary .criteria_stars .stars_off {
    position:absolute;
    display:block;
    left:0;
    top:0;
    min-height:20px;
    line-height:20px;
    white-space:nowrap;
    overflow:hidden;
}
.reviews_summary .criteria_stars .stars_on {
    width:0;
}
.reviews_summary .criteria_stars .stars_off .theme_stars {  /* Override color themes settings */
    color: rgba(128,128,128,0.8);
}
.reviews_summary .criteria_summary .criteria_mark,
.reviews_summary .criteria_summary .criteria_word {
    width:150px;
    font-size:32px;
    line-height:32px;
}
.reviews_5 .reviews_summary .criteria_summary .criteria_mark,
.reviews_5 .reviews_summary .criteria_summary .criteria_word,
.reviews_10 .reviews_summary .criteria_summary .criteria_mark,
.reviews_10 .reviews_summary .criteria_summary .criteria_word {
    display:block;
    left:0;
    right:auto;
}
.reviews_5 .reviews_summary .criteria_summary .criteria_word,
.reviews_10 .reviews_summary .criteria_summary .criteria_word,
.reviews_summary .criteria_summary .criteria_word {
    display:none;
}
.reviews_author .reviews_summary .criteria_bar,
.reviews_users .reviews_summary .criteria_bar {
    display:none;
}
.reviews_summary .criteria_summary.show_word .criteria_word {
    display:block;
}
.reviews_summary .reviews_users_accept {
    display:none;
    padding:8px 10px;
    text-transform:uppercase;
}
.reviews_users .criteria_summary_text.show_button {
    text-align:center;
    padding:15px 0;
}
.reviews_users .criteria_summary_text.show_button .criteria_summary_descr {
    display:none;
}
.reviews_users .criteria_summary_text.show_button .reviews_users_accept {
    display:inline-block;
}


/* Tabs */
.tabs,
.widget ul.tabs {
    position:relative;
    margin:0;
    padding:0;
    list-style:none;
}
.tabs li,
.widget .tabs li {
    display:inline-block;
    margin:0 1px 0 0;
    padding:0;
}
.tabs li:before,
.widget .tabs li:before {
    display:none;
}
.tabs li a,
.widget .tabs li a {
    height:40px;
    line-height:40px;
    padding:0 10px;
    display:inline-block;
    text-align:center;
    text-transform:uppercase;
}

Answer 1

您可以像这样构建 CSS 样式:

基本上用你的内容创建一个容器就可以解决问题这样您的内容取决于容器的大小和宽度通过使用 % 作为宽度和高度..

<html>

<style>
#container{
    border:solid blue;
    width:500px;
    height:500px;
    min-height:300px;
    min-width:300px;
}
#text_content{
    border:solid blue 1px;
    width:30%;
    float:left;
    height:60%;
    font-size:70%;


}
#side_nav{
    border:solid blue 1px;
    width:40%;
    height:90%;
    float:left;

}
</style>
<body>
<div id="container" >
<div id="text_content">
the quick brown fox jumps over the lazy dog near the riverbank
the quick brown fox jumps over the lazy dog near the riverbank
the quick brown fox jumps over the lazy dog near the riverbank
the quick brown fox jumps over the lazy dog near the riverbank
the quick brown fox jumps over the lazy dog near the riverbank

</div>
<div id="side_nav"></div>
</div>

</body>
</html>

希望对你有帮助