Question

好的，所以我已经尝试了所有可能的实现div，浮点数和内联行的示例，以使所有三个表并排运行。这是我到目前为止编写的代码，请告诉我我可能做错了什么。经过几个小时尝试不同方式输入编码后，我无法弄明白

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

如何并排html排列3段

2 个答案: