相关代码：HTML

<!-- ========================= 4-10 Word_Pic 图文区域 ⬇ ========================= -->

<div class="Word_Pic">
<div class="Word_Pic_1">
<div class="pic">
<img src="./images/b1.jpg" alt="pic1">
</div>
<div class="words">
<h3>Library</h3>
<p class="p1">
Lorem Ipsum is simply dummy text of the printing <br>
and typesetting industry
</p>
<p class="p2">
Lorem Ipsum has been the industry's standard dummy text ever  <br>
since the 1500s, when an unknown printer took a galley of type <br>
and scrambled it to make a type specimen book.<br>
</p>
<button>EXPLORE</button>
</div>
<div class="pic">
<img src="./images/b2.jpg" alt="pic1">
</div>
<div class="words">
<h3>Library</h3>
<p class="p1">
Lorem Ipsum is simply dummy text of the printing <br>
and typesetting industry <br>
</p>
<p class="p2">Lorem Ipsum has been the industry's standard dummy text ever  <br>
since the 1500s, when an unknown printer took a galley of type <br>
and scrambled it to make a type specimen book.<br>
</p>
<button>EXPLORE</button>
</div>
</div>
<div class="Word_Pic_2">
<div class="words">
<h3>Library</h3>
<p class="p1">
Lorem Ipsum is simply dummy text of the printing <br>
and typesetting industry <br>
</p>
<p class="p2">Lorem Ipsum has been the industry's standard dummy text ever  <br>
since the 1500s, when an unknown printer took a galley of type <br>
and scrambled it to make a type specimen book.<br>
</p>
<button>EXPLORE</button>
</div>
<div class="pic">
<img src="./images/b3.jpg" alt="pic1">
</div>
<div class="words">
<h3>Library</h3>
<p class="p1">
Lorem Ipsum is simply dummy text of the printing <br>
and typesetting industry <br>
</p>
<p class="p2">Lorem Ipsum has been the industry's standard dummy text ever  <br>
since the 1500s, when an unknown printer took a galley of type <br>
and scrambled it to make a type specimen book.<br>
</p>
<button>EXPLORE</button>
</div>
<div class="pic">
<img src="./images/b4.jpg" alt="pic1">
</div>
</div>

</div>

相关代码：CSS

/*============================== 4-10 Word_Pic 图文区域 ⬇ ================================*/
.Word_Pic{
width: 100%;
margin:0 auto;
}
.Word_Pic .Word_Pic_1{
overflow: hidden;
}
.Word_Pic .Word_Pic_2{
overflow: hidden;
}
.Word_Pic .pic{
float: left;
width: 25%;
height: 380px;       /*Q1:这里可以不设置高吗？*/
}
.Word_Pic .pic img{       /*Q2:图片这里的显示效果有点问题，视窗缩小70%以下的时候，图片右侧有空*/
display: block;
}
.Word_Pic .words{
float: left;
width: 25%;
height: 380px;
background: #07cbc9;
}
.Word_Pic .words h3{
font-size: 24px;
color: white;
padding:20px 0 20px 20px;
}
.Word_Pic .words .p1{
padding: 10px 20px;
color: white;
font-size: 16px;
}
.Word_Pic .words .p2{
padding: 10px 20px;
color: gray;
font-size: 14px;
}
.Word_Pic .words button{    /*Q3：button是行内块元素吗？行内元素可以设置宽高的就是行内块吧*/
display:block;
width: 138px;
height: 40px;
background: #000;
color: white;
line-height: 40px;
text-align: center;
border: none;
margin:0 auto;
margin-top: 20px;
}

问题描述：

Q1:这里可以不设置高吗？

相关截图：

问题描述：

Q2:图片这里的显示效果有点问题，视窗缩小70%以下的时候，图片右侧有空

相关截图：

问题描述：

Q3：button是行内块元素吗？行内元素可以设置宽高的就是行内块吧

相关截图：

问题描述：

Q4：麻烦老师看下代码有其他需要优化的部分吗？