我正在处理的网页的右侧栏有2张图像。随着页面变窄，图像会扩展到侧边栏之外。我想减小断点处的图像大小，以便在平板电脑和台式机上看起来都不错。但是，当我通过CSS（而不是内联HTML）调整大小时，div上下的文本将显示在其上方。
/* Sidebar/side column */
.side {
width: 30%;
display: flex;
flex-direction: column;
background-color: #eeeeee;
font-family:monospace;
}
/* Sidebar/side column inner rounded corner div*/
.sideinner {
width: 95%;
max-width: 325px;
font-family:monospace;
border-radius: 25px;
background: #89aad6;
padding: 20px;
margin: 20px;
align-self:center;
display: flex;
flex-direction: column;
}
/* sidebar text */
.sidetext
{
font-size: .84em;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
/* sidebar images */
.sideimage
{
align-self:center;
}<div class="side">
<div class="sideinner">
<div class="sidetext">
<b>Is my child's language where it should be?</b><br> It is not unusual for us to receive calls from concerned parents months or even years after it would have been advisable. At times, the parents may have been told by friends or even well intentioned
pediatricians not to worry. We suggest that <i>you</i> are the best judge. The info-graphics below depict norms for speech and language development. And, although they are rules of thumb, they are accurate, especially as your child approaches 4,
when teachers, friends, and even employees in a store should understand your child all of the time.
</div>
<div class="sideimage">
<img src="images/speech-intelligibility.png" width="250" alt="Infographic depicting typical speech intelligibility by age. At 1 year, child should be understood by strangers 25% of the time, by 2, 50%, by 3, 75%, and by 4, 100%.">
</div>
<div class="sidetext">
In earlier years, such as at 1 or 2, there is more variation, but even at those ages, if your child seems to be behind, you should give a speech-language pathologist a call to discuss. Most speech-language pathologists will be happy to talk with you.
We certainly are. Many delays in the earlier years will not require treatment or even a formal evaluation. But every delay <i>should</i> require a conversation, as certain issues become much harder to correct at an older age.
</div>
<div class="sideimage">
<img src="images/rough-guide-to-language-development.png" width="250" alt="Infographic depicting a rough guide to language development, with the following bullet points: 1. Expect first words between 12 and 18 months with a “spurt” of language development likely before 2. 2. Grammar should be correct mist of the time by 4 years of age. 3. Anticipate hearing 4 to 5 word sentences by 4 years of age. 4. “Other people” will understand almost everything your child says by the time he or she is 4.">
</div>
</div>
</div>
答案 0 :(得分：0)
/* Sidebar/side column */
.side {
width: 30%;
display: flex;
flex-direction: column;
background-color: #eeeeee;
font-family:monospace;
}
/* Sidebar/side column inner rounded corner div*/
.sideinner {
width: 95%;
max-width: 325px;
font-family:monospace;
border-radius: 25px;
background: #89aad6;
padding: 20px;
margin: 20px;
align-self:center;
display: flex;
flex-direction: column;
}
/* sidebar text */
.sidetext
{
font-size: .84em;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
/* sidebar images */
.sideimage
{
align-self:center;
}
@media(max-width: 991px){
.sidetext {
padding-left: 0px;
padding-right: 0px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="side">
<div class="sideinner">
<div class="sidetext">
<b>Is my child's language where it should be?</b><br> It is not unusual for us to receive calls from concerned parents months or even years after it would have been advisable. At times, the parents may have been told by friends or even well intentioned
pediatricians not to worry. We suggest that <i>you</i> are the best judge. The info-graphics below depict norms for speech and language development. And, although they are rules of thumb, they are accurate, especially as your child approaches 4,
when teachers, friends, and even employees in a store should understand your child all of the time.
</div>
<div class="sideimage">
<img src="https://catchthemes.com/demo/euphony-free/files/2017/03/pexels-photo15-920x1047.jpg" alt="Infographic depicting typical speech intelligibility by age. At 1 year, child should be understood by strangers 25% of the time, by 2, 50%, by 3, 75%, and by 4, 100%." style="width: 100%;">
</div>
<div class="sidetext">
In earlier years, such as at 1 or 2, there is more variation, but even at those ages, if your child seems to be behind, you should give a speech-language pathologist a call to discuss. Most speech-language pathologists will be happy to talk with you.
We certainly are. Many delays in the earlier years will not require treatment or even a formal evaluation. But every delay <i>should</i> require a conversation, as certain issues become much harder to correct at an older age.
</div>
<div class="sideimage">
<img src="https://catchthemes.com/demo/euphony-free/files/2017/03/pexels-photo15-920x1047.jpg" alt="Infographic depicting a rough guide to language development, with the following bullet points: 1. Expect first words between 12 and 18 months with a “spurt” of language development likely before 2. 2. Grammar should be correct mist of the time by 4 years of age. 3. Anticipate hearing 4 to 5 word sentences by 4 years of age. 4. “Other people” will understand almost everything your child says by the time he or she is 4." style="width: 100%;">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>