我陷入了一个问题，当试图设置图像和文本并排，然后它不显示完美，结账下面我分享了我的代码。
这是我的形象
https://ibb.co/sks3bjm
我想要这样
https://ibb.co/rhfkbkx
index.html
<div class="container">
<div class="row">
<div class="col-md-4 mt-2">
<img src="Images/twitter.jpg" style="width: 200px;">
<div style="margin-top: 10px;">
<h4>Should Twitter Get Rid of Follower Counts?</h4>
<p>The possibility feels closer than ever</p>
<p>Cool Neha in All Things Creative</p>
<p><b>JAN 9. 5 min read</b></p>
</div>
</div>
<div class="col-sm-4">
<div class="row" style="display: flex; flex-direction: column;" style="height: 50px;">
<div class="col-sm-4" style="display: flex; ">
<img src="Images/html.jpg" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
<div class="col-sm-4" style="display: flex;">
<img src="Images/cs.png" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
<div class="col-sm-4" style="display: flex;">
<img src="Images/js.png" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
</div>
</div>
<div class="col-sm-4 mt-2">
<img src="Images/cofee.png" style="width: 350px;">
<div style="margin-top: 10px;">
<h4>No,That's Not How You Say It.</h4>
<p>A short Personal history of my favourite fast Food.</p>
<p>VIP Singh</p>
<p><b>JAN 29. 8 min read</b></p>
</div>
</div>
</div>
</div>
看起来中间的柱子被压扁得太厉害了。这是因为每个图像-文本对都在具有class=“col-sm-4”的div中。这使得div太窄了。如果删除类，问题就会消失。
这是结果代码：
<div class="container">
<div class="row">
<div class="col-md-4 mt-2">
<img src="Images/twitter.jpg" style="width: 200px;">
<div style="margin-top: 10px;">
<h4>Should Twitter Get Rid of Follower Counts?</h4>
<p>The possibility feels closer than ever</p>
<p>Cool Neha in All Things Creative</p>
<p><b>JAN 9. 5 min read</b></p>
</div>
</div>
<div class="col-md-4">
<div class="row" style="display: flex; flex-direction: column;" style="height: 50px;">
<div class="" style="display: flex; ">
<img src="Images/html.jpg" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
<div class="" style="display: flex;">
<img src="Images/cs.png" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
<div class="" style="display: flex;">
<img src="Images/js.png" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
</div>
</div>
<div class="col-sm-4 mt-2">
<img src="Images/cofee.png" style="width: 350px;">
<div style="margin-top: 10px;">
<h4>No,That's Not How You Say It.</h4>
<p>A short Personal history of my favourite fast Food.</p>
<p>VIP Singh</p>
<p><b>JAN 29. 8 min read</b></p>
</div>
</div>
</div>
</div>
