如何并排对齐3段html

Question

好的，所以我尝试了所有可能的实现divs，float和in-lines的例子，让所有的三个表并肩工作。这是我编写的代码，请告诉我我可能会做错什么。我无法弄清楚花了好几个小时尝试不同的方式来输入编码

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

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

Answer 1

修订 看后这个：

https://jsfiddle.net/fh2st5nm/2/

HTML：

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

CSS：

.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;} 

Answer 2

 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 
}