如何将3个段落并排对齐html

好的，我已经尝试了所有可能的例子来实现div、float和in-line，让所有三个表并排运行，但都不起作用。这是迄今为止我编写的代码，请告诉我我可能做错了什么。我花了好几个小时试着用不同的方法输入代码，但还是弄不明白

<div align="left;"><div style="width:30%;auto;position;relative;background-color:#131313;border:2px solid #1b463d;"><div style="left;"><img src="http://wallpapershacker.com/wallpaper_3840x2160/clockwork_watches_clocks_time_desktop_1600x1200_hd-wallpaper-455121.jpg" style="max-width:100%;">

<div style="width:100%;height:100%;overflow:auto;background-color:#111111;text-align:float:left;justify;font-family:verdana;font-size:10px;color:#636362;"><br>CLOCKWORK DREAMS.</br> This is where the machines rule. Whether it be an entire being augmented with robotics, or humans with mechanical adornaments. Those who embrace Science and obey its principles are welcomed here. >$[zone_1]</div></div>

发条梦想。
这是机器统治的地方。无论是一个拥有机器人的整体，还是拥有机械装饰的人类。这里欢迎接受科学并遵守其原则的人。>$[第1区]

超越。
地狱和天堂都存在，它就住在这里。那些怪物、圣人，甚至可能是它们的混血儿，在世界的这一地区茁壮成长。>$[分区2]

神秘的
这对人类意味着什么？自由和独立的理念由来已久，这些理念就存在于此$[第3区]

更新 看看这个：

html:

这里你不需要css，你应该有一个宽度为100%的主div，它的子元素是have style float=left likebelow
分区111111111111
22222222分区
第33333分部
css。。。。。。。。。。
.内联{
浮动：左
}

您的问题能否更具体一点？也许这个链接可能会有所帮助：我正在尝试显示我使用的代码，但是当我需要你选择你的代码并点击这个图标时，它会格式化它：{}不要养成坏习惯，不要在dom中使用“样式”，如果你在重复它，就更是如此。：）

<div align="left;"><div style="width:30%;auto;position;relative;background-color:#131313;border:2px solid #1b463d;"><div style="center;"><img src="http://trucosyfondos.com/fondos-de-pantalla/data/media/10/Demon_angel.jpg" style="max-width:100%;">

<div style="width:100%;height:100%;overflow:auto;background-color:#111111;text-align:float:left;justify;font-family:georgia;font-size:10px;color:#636362;"><br>TRANSCENDED.</br>Hell and Heaven have an existence, and this is where it dwells. Those who are monsters, saints, or perhaps even a hybrid of each thrive in this part of the world. >$[zone_2]</div></div>

<div align="left;"><div style="width:30%;auto;position;relative;background-color:#131313;border:2px solid #1b463d;"><div style="right;"><img src="http://orig10.deviantart.net/8658/f/2007/202/9/b/human_reflection_by_yudha3.jpg" style="max-width:100%;">

<div style="width:100%;height:100%;overflow:auto;background-color:#111111;text-align:float:left;justify;font-family:sylfaen;font-size:10px;color:#636362;"><br>THE ENIGMATIC</br>What does it mean to be human? The idea of freedom and independance has long been sought for, and here is where those ideals exist. >$[zone_3]</div></div>

 <div class="oneThird">
  <img src="http://wallpapershacker.com/wallpaper_3840x2160/clockwork_watches_clocks_time_desktop_1600x1200_hd-wallpaper-455121.jpg" />
  <p>CLOCKWORK DREAMS.<br> This is where the machines rule. Whether it be an entire being augmented with robotics, or humans with mechanical adornaments. Those who embrace Science and obey its principles are welcomed here. >$[zone_1]</p></div>
 <div class="oneThird">
   <img src="http://trucosyfondos.com/fondos-de-pantalla/data/media/10/Demon_angel.jpg" />
   <p>TRANSCENDED.<br>Hell and Heaven have an existence, and this is where it dwells. Those who are monsters, saints, or perhaps even a hybrid of each thrive in this part of the world. >$[zone_2]</p></div>
 <div class="oneThird">
   <img src="http://orig10.deviantart.net/8658/f/2007/202/9/b/human_reflection_by_yudha3.jpg" />
<p>THE ENIGMATIC<br>What does it mean to be human? The idea of freedom and independance has long been sought for, and here is where those ideals exist. >$[zone_3]</p></div>

.oneThird {
  width: 33%;
  float: left;
  background-color: #111;
  text-align: justify;
  font-family: sylfaen;
  font-size: 10px;
  color: #636362;
  }
 .oneThird img {width: 100%;}
 .oneThird p {padding: 3px;}

        here you dont need css also you should have one main div with width 100% and its children are have style float=left likebelow

    <div id="maindiv">
            <div class="inline">div 111111111111111111  </div>
            <div class="inline">div 2222222222222222222 </div>
            <div class="inline"> div 33333333333333333333333</div>
       </div>

css..........
.inline{
float:left
}