html - 通过在调整浏览器大小时在图像下添加文本来使页面响应

Question

我正在尝试使此页面响应。正如您所看到的，当我调整浏览器大小时，文本被压缩而不是移动到图像底部。任何帮助将不胜感激!

这是我的 HTML:

<div id="content-wrapper">

    <div class="container">
        <div class="content">
            <div class="line">
                <h2 class="text-center exec-header">Executive
                Directors</h2>
            </div>
            <article class="ninecol">
                <div class="content-item first cf" id="maja">
                    <figure>
                        <img alt="" class="bio-pics" src=
                        "/wp-content/themes/creativeforces/images/majapic.jpg"
                        width="250px">
                    </figure>
                    <h3 class="name">Maja Miletich</h3>
                    <h5 class="job-title">CEO</h5>
                    <div class="description">
                        <p>Maja Miletich is the CEO of Zip Zap Zop Kids,
                        LLC. Maja has worked with children on many levels.
                        Having a brother with Autism has given Maja an
                        understanding of how powerful communication is for
                        ALL children. Maja has worked for years as a
                        teacher where she practices emergent
                        curriculum.</p>
                        <p>Maja has studied theater and improv at A.C.T. in
                        San Francisco as well as graduated from The Second
                        City Training Center in Hollywood where she studied
                        improv and sketch comedy.</p>
                        <p>Maja has her Bachelors Degree in Early Childhood
                        Education. Maja's focus is on inclusive classrooms
                        where curriculum is designed to allow children and
                        young adults to feel comfortable expressing
                        themselves in whichever way they feel most
                        comfortable</p>
                        <p>Maja believes when we can share with one another
                        what has been taught then, and only then, are we
                        actually learning.</p>
                    </div>
                </div>
                <hr>
                <div class="content-item first cf" id="april">
                    <figure>
                        <img alt="" class="bio-pics" src=
                        "/wp-content/themes/creativeforces/images/april2.jpg"
                        width="250px">
                    </figure>
                    <h3 class="name">April Miletich</h3>
                    <h5 class="job-title">CFO</h5>
                    <div class="description">
                        <p>April Rasmussen, PhD has been a credentialed
                        English teacher since 2008 and has taught
                        everything from advanced placement English language
                        and composition to literature through film, and
                        English as a second language support classes. Her
                        passion is for the art of story and also
                        storytelling as a tool for student growth. She
                        holds advanced degrees in education, mythology and
                        depth-psychology.</p>
                    </div>
                </div>
            </article>
        </div>
        <div class="line">
            <h3 class="text-center exec-header">Board of Directors</h3>
        </div>
        <div class="content-item first cf" id="ari">
            <figure>
                <img alt="" class="bio-pics" src=
                "/wp-content/themes/creativeforces/images/ari.jpg" width=
                "250px">
            </figure>
            <h3 class="name">Ari Schenider</h3>
            <h5 class="job-title">President</h5>
            <div class="description">
                <p>Ari Schneider is a graduate of The Second City
                Conservatory and has a (BA) Hons from The Guildford School
                of Acting in England. He has been a cast member of the
                all-ages improv review The Really Awesome Improv Show
                (Voted Best Kid’s Comedy Show) at The Second City in
                Hollywood for the past 3 years. He also is affiliated with
                the mentorship program, YSF (The Young Screenwriters
                Foundation) at New Rhodes as well as teaching afer-school
                improv with Zip Zap Zop Kids, LLC.</p>
            </div>
        </div>
        <hr>
        <div class="content-item first cf" id="debra">
            <figure>
                <img alt="" class="bio-pics" src=
                "/wp-content/themes/creativeforces/images/debra.jpg" width=
                "250px">
            </figure>
            <h3 class="name">Debra Gliozzi</h3>
            <h5 class="job-title">Treasurer</h5>
            <div class="description">
                <p>Debra Kratochvil Gliozzi is a first generation American
                and first in her family to attend college. Her career spans
                35 years and two distinct industries. Debra is currently an
                administrator and educator in Danville, California. She
                brought her MBA and business experience to San Ramon Valley
                High School and integrated Business Computers (an ROP
                course), Personal Finance and Introduction to Business and
                Entrepreneurship into the curriculum. Debra says that her
                goal is to equip students with skills that prepare them for
                the real world. It is the most important thing I can
                do.</p>
                <p>This is her second career after transitioning from the
                Telecommunications Industry where she held management
                positions at Calix Inc., SBC Communications, Pacific Bell,
                MCI and Sprint. Her vast experiences included Forecasting,
                Accounting, Business Analysis, Market Financials,
                Competitive Assessment, Product Development, Product
                Marketing, Procurement, Quality Management and Sales
                Operations & Planning.</p>
            </div>
        </div>
        <hr>
        <div class="content-item first cf" id="debra">
            <figure>
                <img alt="" class="bio-pics" src=
                "/wp-content/themes/creativeforces/images/melina.jpg"
                width="250px">
            </figure>
            <h3 class="name">Melina Johnson</h3>
            <h5 class="job-title">Secretary</h5>
            <div class="description">
                <p>Melina Johnson is a self-employed entrepreneur who
                created her own home organizing business. Melina is the
                mother of two children, her son having Autism. She has
                spent countless hours dedicated to researching and
                providing her son with the best therapies and services to
                help him with his growth and development. Every therapist
                and teacher, over the years, has told Melina that her
                natural sense of humor has been the best therapy she could
                provide to her son - Humor and laughter open up doors to
                cognitive and social development. And it’s fun!</p>
                <p>Melina’s education has been in the health sciences,
                having a degree in Dental Hygiene. After years of hygiene
                practice, she decided to create a job for herself that
                would utilize her natural organizational skills, and allow
                her creativity and fun. Melina continues to grow her home
                organizing business and raise her children with a strong
                sense of responsibility, and a positive outlook on
                life.</p>
            </div>
        </div>
    </div>
 </div>

和 CSS:

.line {
    overflow: hidden;
    text-align: center;
}

.exec-header{
    margin-top: 15px;
    display: inline-block;
    padding: 0 15px;
    position: relative;
    font-family: Roboto Condensed;
    font-weight: bold;
    font-size: 30px;
}

.content .ninecol {
    padding-right: 4.6875%;
    padding-left: 4.6875%;
}

.exec-header:before{
    right: 100%;
}

.exec-header:before, .exec-header:after {
    background: #333333;
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    top: 50%;
    width: 96%;
}


.content {
    overflow: hidden;
    margin: 0 auto;
    max-width: 1200px;
}

.content-item.first {
    padding-top: 0;
    background: 0;
    overflow:hidden;
}

.content-item {
    margin-left: -2.18978%;
    margin-right: -2.18978%;
    padding: 30px 2.18978%;
    }

#maja{
    margin-top: 10px;
}

#ari{
    margin-top: 10px;
}

.exec-header:after {
    left: 100%;
}

.cf:before, .cf:after {
    content: " ";
    display: table;
}


.content-item figure {
    }

figure img {
    padding-bottom: 14px;
}

.bio-pics {
    display: block;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic;
    -moz-user-drag: -moz-none;
    -webkit-user-drag: none;
    user-drag: none;
}

h3.name {
    margin-bottom: .75em;
    line-height: 1.2em;
     font-family: Roboto Condensed;
    font-weight: bold;
}

.content-item figure {
    float: left;
    margin-right: 5.83942%;
    margin-bottom: 0;

}

.content-item .description, .content-item .details {
    overflow: hidden;
}

.content-item .description {
    min-height: 0;
}

h5.job-title{
      font-family: Roboto Condensed;
    font-weight: bold;
       margin-top: -16px;
}

Answer 1

尝试添加 float:left ；在 css 文件的描述类中它应该也可以使用 id=maja 添加一个显示内联 block 到 div