Responsive a 3 imagenes en linea dentro de un div

[guichogdl]

Buen dia, tengo un problema con un div que contiene 3 imagenes de manera lineal, necesito que se mantengan en linea al cambiar el tamaño de la ventana o de cualquier dispositivo asi como cuando se gira.

El div que las contiene esta al centro de la pagina en 900px;

Eh intentado usar estas reglas, pero no eh tenido exito.

html

Código HTML:

<div id="mi_div">
    <img src="xxx" />
    <img src="xxx" />
    <img src="xxx" />
</div>
 

css

Código CSS:

#mi_div { 
  margin: 0 auto; 
  width: 900px;
}
 
#mi_div img {
  max-width: 300px;
  width: auto;
}
 

*Tambien use javascript donde calculo el tamaño del div y divido entre el numero de imagenes y les asigno el resultado al width de las imagenes pero no ah sido lo mas optimo y aparte falla mucho.

Gracias de antemano por su ayuda