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

Question

I am using HTML, and I am trying to make a part of a webpage where I have a textbox in the center of the screen and five images surrounding the textbox.

I am able to place three images above the box, but when I try to place an image to the left and to the right of the textbox, the images seem to be "stuck" in the center of the page. All this is in a div element.

Answer 1

Easiest way to do this is with grid system. In example if you use Bootstrap grid system you can do it like this:

<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>

You can also do it without grid system like Gerasimos answer.

Answer 2

Try using the CSS position property if this doesn't work try entering this code in your style sheet:

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