我希望文本显示在图像的右侧，它们之间有一些间距。我遇到的问题是，反应不是最好的。有没有更好的方法来防止文本在调整大小时缩在图像下面?
#expertise-section {
background-color: #bce4b8;
border-bottom: 1px solid #000;
text-align: center;
padding: 100px 0 0;
min-height: 650px;
width: 100%;
} /* Adjusts section sizing, padding and text alignment */
/*------------------------------------------------
START OF EXPERTISE SECTION STYLING
------------------------------------------------*/
#expertise-section h1 {
color: #000;
font-family: "Lobster Two", cursive;
font-size: 40px;
margin-top: -2%;
} /* Sets colour, font, font size and position of the h1 title within the expertise section */
.expertise-section-title {
margin-top: 0;
} /* Sets margin of the expertise title */
.expertise-section-title:before {
content: "";
display: block;
border-top: solid 1px #000;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: 1;
} /* Creates horizontal line for the expertise section titles and sets positioning */
.expertise-section-title span {
background: #bce4b8;
padding: 0 20px;
position: relative;
z-index: 1;
} /* Sets background of the expertise section background and sets padding for spacing between title and hr line */
.expertise-section-content {
margin-left: 14%;
margin-right: 14%;
margin-top: 4%;
}
.expertise-section-content img {
float: left;
display: block;
border: 1px solid black;
margin-top: -2.25%;
max-width: 45vh;
max-height: 30vh;
border-radius: 12.5%;
margin-right: 5%;
} /* Sets size and positioning of image within the expertise section */
.expertise-section-content p {
text-align: center;
width: 100%;
font-size: 2.2vh;
}
.expertise-section-content button {
font-size: 2vh;
padding: 0.6em 2em;
border-radius: 35px;
color: #fff;
background-color: #339a9a;
border: 1px solid black;
cursor: pointer;
text-align: center;
/* clear: both; May not need this included */
margin-left: 0%;
margin-top: 2%;
}
.expertise-section-content button a {
color: white;
}
.expertise-section-content button:hover {
background-color: #004e4f;
border: 2px solid white;
}
/*------------------------------------------------
END OF EXPERTISE SECTION STYLING
------------------------------------------------*/
@media only screen and (max-width: 1606px) {
#expertise-section h1 {
margin-top: -4%;
margin-bottom: 5%;
} /* Sets colour, font, font size and position of the h1 title within the expertise section */
.expertise-section-content {
margin-left: 2.5%;
margin-right: 2.5%;
margin-top: 3%;
}
.expertise-section-content img {
display: block;
margin-left: 30%;
margin-right: 30%;
width: 40%;
margin-bottom: 3%;
} /* Sets size and positioning of image within the expertise section */
.expertise-section-content p {
text-align: center;
font-size: 26px;
}
.expertise-section-content button {
text-align: center;
margin-bottom: 6.5%;
}
}
@media only screen and (max-width: 815px) {
/*------------------------------
START OF EXPERTISE SECTION
--------------------------------*/
#expertise-section h1 {
margin-top: -10%;
font-size: 35px;
color: #000;
} /* Makes changes to sizing and positioning of the h1 tag */
.expertise-section-title {
margin-top: 0;
} /* Sets margin of the expertise title */
.expertise-section-title:before {
content: "";
display: block;
border-top: solid 1px #000;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: 1;
} /* Creates horizontal line for the expertise section titles and sets positioning */
.expertise-section-title span {
background: #bce4b8;
padding: 0 20px;
position: relative;
z-index: 1;
} /* Sets background of the expertise section background and sets padding for spacing between title and hr line */
.expertise-section-content {
margin-left: 2.5%;
margin-right: 2.5%;
margin-top: 6%;
}
.expertise-section-content img {
margin-left: 12.5%;
margin-right: 12.5%;
width: 75%;
margin-top: 4%;
margin-bottom: 8%;
} /* Sets size and positioning of image within the expertise section */
.expertise-section-content p {
text-align: center;
width: 100%;
font-size: 20px;
}
.expertise-section-content button {
font-size: 26px;
/* clear: both; May not need this included */
margin-top: 5%;
margin-bottom: 15%;
padding: 0.4em 1.5em;
}
/*------------------------------
END OF EXPERTISE SECTION
--------------------------------*/
}<section id="expertise-section">
<h1 class="expertise-section-title"><span>Why Choose Me?</span></h1>
<div class="expertise-section-content">
<div class="element">
<img src="http://nathan-bayne.co.uk/images/pexels-anna-tarazevich-5910768.jpg" alt="image"/>
<p>My approach is warm and understanding. I am here to listen to you and help you to make sense of difficult times.
If you would like to find out more, you can read about my experience and qualifications by clicking the button below.
</p>
<button onclick="location.href='findoutmore.html'" type="button">Find Out More</button> <!-- Links to another page-->
</div>
</div>
</section>如果有更好的解决方案，我将不胜感激。
这是你要找的吗?删除某些视口和最小视口的一些边距，删除图像上的浮动，以便它们堆叠。
#expertise-section {
background-color: #bce4b8;
border-bottom: 1px solid #000;
text-align: center;
padding: 100px 0 0;
min-height: 650px;
width: 100%;
} /* Adjusts section sizing, padding and text alignment */
/*------------------------------------------------
START OF EXPERTISE SECTION STYLING
------------------------------------------------*/
#expertise-section h1 {
color: #000;
font-family: "Lobster Two", cursive;
font-size: 40px;
margin-top: -2%;
} /* Sets colour, font, font size and position of the h1 title within the expertise section */
.expertise-section-title {
margin-top: 0;
} /* Sets margin of the expertise title */
.expertise-section-title:before {
content: "";
display: block;
border-top: solid 1px #000;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: 1;
} /* Creates horizontal line for the expertise section titles and sets positioning */
.expertise-section-title span {
background: #bce4b8;
padding: 0 20px;
position: relative;
z-index: 1;
} /* Sets background of the expertise section background and sets padding for spacing between title and hr line */
.expertise-section-content {
margin-left: 14%;
margin-right: 14%;
margin-top: 4%;
}
.expertise-section-content img {
float: left;
display: block;
border: 1px solid black;
margin-top: -2.25%;
max-width: 45vh;
max-height: 30vh;
border-radius: 12.5%;
margin-right: 5%;
} /* Sets size and positioning of image within the expertise section */
.expertise-section-content p {
text-align: center;
width: 100%;
font-size: 2.2vh;
}
.expertise-section-content button {
font-size: 2vh;
padding: 0.6em 2em;
border-radius: 35px;
color: #fff;
background-color: #339a9a;
border: 1px solid black;
cursor: pointer;
text-align: center;
/* clear: both; May not need this included */
margin-left: 0%;
margin-top: 2%;
}
.expertise-section-content button a {
color: white;
}
.expertise-section-content button:hover {
background-color: #004e4f;
border: 2px solid white;
}
/*------------------------------------------------
END OF EXPERTISE SECTION STYLING
------------------------------------------------*/
@media only screen and (max-width: 1606px) {
#expertise-section h1 {
margin-top: -4%;
margin-bottom: 5%;
} /* Sets colour, font, font size and position of the h1 title within the expertise section */
.expertise-section-content {
margin-left: 2.5%;
margin-right: 2.5%;
margin-top: 3%;
}
.expertise-section-content img {
width: 40%;
margin-bottom: 3%;
} /* Sets size and positioning of image within the expertise section */
.expertise-section-content p {
text-align: center;
font-size: 26px;
}
.expertise-section-content button {
text-align: center;
margin-bottom: 6.5%;
}
}
@media only screen and (max-width: 815px) {
/*------------------------------
START OF EXPERTISE SECTION
--------------------------------*/
#expertise-section h1 {
margin-top: -10%;
font-size: 35px;
color: #000;
} /* Makes changes to sizing and positioning of the h1 tag */
.expertise-section-title {
margin-top: 0;
} /* Sets margin of the expertise title */
.expertise-section-title:before {
content: "";
display: block;
border-top: solid 1px #000;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: 1;
} /* Creates horizontal line for the expertise section titles and sets positioning */
.expertise-section-title span {
background: #bce4b8;
padding: 0 20px;
position: relative;
z-index: 1;
} /* Sets background of the expertise section background and sets padding for spacing between title and hr line */
.expertise-section-content {
margin-left: 2.5%;
margin-right: 2.5%;
margin-top: 6%;
}
.expertise-section-content img {
margin-left: auto;
margin-right: auto;
width: 95%;
margin-top: 4%;
margin-bottom: 8%;
float: none; /* stacks on smaller viewports */
} /* Sets size and positioning of image within the expertise section */
.expertise-section-content p {
text-align: center;
width: 100%;
font-size: 20px;
}
.expertise-section-content button {
font-size: 26px;
/* clear: both; May not need this included */
margin-top: 5%;
margin-bottom: 15%;
padding: 0.4em 1.5em;
}
/*------------------------------
END OF EXPERTISE SECTION
--------------------------------*/
}<section id="expertise-section">
<h1 class="expertise-section-title"><span>Why Choose Me?</span></h1>
<div class="expertise-section-content">
<div class="element">
<p><img src="http://nathan-bayne.co.uk/images/pexels-anna-tarazevich-5910768.jpg" alt="image"/>My approach is warm and understanding. I am here to listen to you and help you to make sense of difficult times.
If you would like to find out more, you can read about my experience and qualifications by clicking the button below.
</p>
<button onclick="location.href='findoutmore.html'" type="button">Find Out More</button> <!-- Links to another page-->
</div>
</div>
</section>