CSS中的换行内容

Question

桌面看起来不错，但@media screen的{​​{1}}会让它离屏。有没有办法在CSS中换行表行的内容，以便内容出现在每一行上？

这就是现在的样子，我希望老人的形象能够进入下一行，而不是走到屏幕外。

这是html

480x800

这是与表

相关的css

<div class="sub" id = "history">
            <h1>SCIS Roots</h1>
            <table class = "table">
            <tr>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/bless.jpg" alt = "historyImage1">   </a>
                    <div class = "description">
                        <p class = "description_content">
                        The youngest School in Saint Louis University started with the 
                        vision of the then Vice-President for Finance and later University
                        President, Rev. Fr. Ghisleen de Vos(1976-1983).
                        </p>
                    </div>
                </div>
                </td>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/hist2.png" alt = "historyImage2"></a>
                    <div class = "description">
                        <p class = "description_content"> Fr. de Vos saw the
                            possibility of automating accounting and enrolment systems during
                            a period where computerization was not yet widely practiced.
                        </p>
                    </div>
                </div>  
                </td>
                </tr>
                </table>

                <h3>SCIS- LEVEL UP!</h3>
                <table class = "table">
                <tr>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/hist7.png" alt = "historyImage3"></a>
                    <div class = "description">
                        <p class = "description_content">
                        SLU catered to the computing needs of other institutions in nearby
                        regions when it was acquitted by IBM Systems in 1969 and 1980 until
                        1990.
                        </p>
                    </div>
                </div>
                </td>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/scis.jpg" alt ="historyImage4"></a>
                    <div class ="description">
                        <p class = "description_content">
                        In 1990 it became the Institute of Information and 
                        Computing Science and offered the Computer Science course. The 
                        institute became a college in 1994.
                        </p>
                    </div>
                </div>
                </td>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/hist3.png" alt = "historyImage3"></a>
                        <div class = "description">
                            <p>
                            Courses in Information Technology, Mathematics, Information Management, and Library and
                            Information Science were added over time. By 1995, it was the first
                            in the region to offer a graduate program in IT. 
                            </p>
                        </div>
                </div>
                </td>
                </tr>
                </table>

                <h3>SCIS REACHES OUT!</h3>
                <table class = "table">
                <tr>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/ict.jpg" alt = "historyImage4"></a>
                    <div class = "description">
                        <p>
                        In 2007, it hosted the first ever Northern Luzon International IT
                        conference. This was attended by people from all over the globe and 
                        became an annual event.
                        </p>
                    </div>
                </div>
                </td>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/hist4.jpg" alt = "historyImage4"></a>
                    <div class = "description">
                        <p class = "description_content">
                        To keep up with the trend of Digital Arts technology, the School
                        has since added short diploma courses in digital animation, 
                        multimedia systems, digital design, editing and publishing, and 
                        the like. The School is also the first in the country to offer the
                        trending academic initiative - Masters of Science in Service
                        Management Engineering(MSSME).
                        </p>
                    </div>
                </div>
                </td>
                <td>
                <div class = "wrapper">
                    <a href = ""><img class = "tableImage" src = "../images/hist5.png" alt = "historyImage6"></a>
                    <div class = "description">
                        <p class = "description_content">
                        The School is also socially relevant when it comes
                        to sharing its expertise and resources. In 2007, it donated
                        multiple computers to the Baguio City National High School(BCNHS)
                        as part of a collaborative project with the Close the Gap(CTG)
                        alliance program of Belgium. Along with this, the School designed
                        and conducted a series of training programs for the teachers of
                        the BCNHS on several computer and web-based applications.
                        </p>
                    </div>
                </div>
                </td>
                </tr>
                </table>
                <h3>THE FUTURE OF SCIS!</h3>
                    <p id = "future">
                        The School's future looks bright as it continues to soar with the
                        speed of rapid modernization.  The School of Computing and 
                        Information and Sciences recognizes though that the power to 
                        create, command, and control information technology comes with 
                        great responsibility.  The School therefore primes itself not 
                        only on setting new academic directions towards the advancement 
                        of IT and Computing education and research, but also on 
                        advocating the ethical use of information and computing 
                        technology.
                    </p>
        </div>  

Answer 1

如果您希望自己的网页具有响应能力，我会放弃将内容放入table。关于您网页上的图片，我会将每个图片放在div中。默认情况下，div将并排放置，媒体查询将它们放在另一个顶部，用于窄显示。

HTML

<div class="parent">
    <div class="img-container">
        <img src="..."></img>
    </div>
    <div class="img-container">
        <img src="..."></img>
    </div>
</div>

CSS

.img-container {
  display: inline-block;
}

@media all and (max-width: 480px) {
  .img-container {
    display: block;
  }
}