Question

Hy，我在css面板上有点问题，我生病了一点帮助，我的代码运行良好但是如果用户浏览器尺寸减小，面板在这里的文字下面是我的意思是：

这是普通浏览器尺寸的显示方式：

enter image description here

如果用户的浏览器缩小了尺寸，则会出现这种情况：

enter image description here

至少文本要与css面板重叠会很好，我的愿望是它要换一个新行，但是它不起作用......

Hero是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>

希望这可以提供帮助

CSS收缩

1 个答案: