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

Question

好的，所以我已经尝试了所有可能的实现 div、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
}