如何在div元素中向左和向右移动两个图像？

Question

我正在使用HTML，我正在尝试创建一个网页的一部分，我在屏幕中央有一个文本框，文本框周围有五个图像。

我可以在盒子上面放置三张图片，但是当我尝试将图像放在文本框的左侧和右侧时，图像似乎“卡在”页面的中心。所有这些都是div元素。

Answer 1

最简单的方法是使用网格系统。例如，如果您使用Bootstrap grid system，则可以这样做：

<div class="wrapper">
<div class="row">
  <div class="col-md-4"><img src="source" alt="something" ></div>
  <div class="col-md-4">Textbox</div>
  <div class="col-md-4"><img src="source" alt="something" ></div>
</div>

你也可以在没有像Gerasimos回答的网格系统的情况下做到这一点。

Answer 2

尝试使用CSS position property，如果这不起作用，请尝试在样式表中输入此代码：

#left-image { position: absolute; left: 10px}
#right-image { position: absolute; right: 10px}