尝试以某种方式在页面上定位图像和文本（包括示例）

Question

将特定页面的布局调整为我之前创建的设计时遇到一些麻烦，仍然需要掌握CSS的定位。

这是我到目前为止所做的：

这是我在

之后的布局

这是我的HTML：

<div class="core-value">
<img class="img-square" src="Long_Term_Relationships.jpg">              
<h4>Forging Strong Long Term Relationships</h4>
<p>We focus on strong, long term relationships with our clients</p>
</div>

<div class="core-value">
<img class="img-square" src="focus.jpg">    
<h4>Focus</h4>
<p>We focus on understanding our clients' long term strategies</p>
</div>

<hr>

<div class="core-value">
<img class="img-square" src="Team.jpg"> 
<h4>A Clear Sense of Team</h4>
<p>We work closely as a team, irrespective of our diverse work</p>
</div>

<div class="core-value">
<img class="img-square" src="integrity.jpg">    
<h4>Intergrity</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
</div>

<hr>

<div class="core-value">
<img class="img-square"  src="excellence.jpg">  
<h4>Excellence</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
</div>

<div class="core-value">
<img class="img-square" src="delivery.jpg"> 
<h4>Delivery</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
</div>

<hr>

这是我的CSS：

.img-square {
    width: 20%;
    display: block;
}

.core-value {
    display: inline-block;
    float: left;
    width: 50%;
}

非常感谢帮助！

Answer 1

改变你的风格可能对你有帮助

.img-square {
    width: 20%;
    float:left;
}

.core-value {
    float: left;
    width: 50%;
}

Answer 2

包括float:left e从display:block;

删除.img-square

.img-square {
    float:left;
    width: 20%;
}

.core-value {
    float: left;
    width: 50%;
}