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

在调整特定页面的布局以使其看起来像我之前创建的设计时遇到了一些麻烦，但仍然需要掌握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>

---

我们将非常感谢您的帮助

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

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

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

---

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

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

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

---

包括

float:left

e删除

display:block来自
.img square

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

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

包括
float:left
e删除
display:block来自
.img square

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

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

哦，哇，这是难以置信的简单哈哈，现在它只是一个添加填充物的情况下，他们的空间了一点。。。有没有可能用CSS使照片看起来更方形而不是矩形？或者我真的需要在PhotoShop中重新调整它们的大小吗？哦，哇，这真是太简单了，哈哈，现在只需要添加填充物来将它们隔开一点。。。有没有可能用CSS使照片看起来更方形而不是矩形？或者我真的需要在PhotoShop中重新调整它们的大小吗？