2017-08-28 48 views
0

我想获得3列彼此相邻的输出。我所得到的是一列之上。我在代码中缺少什么?HTML列彼此相邻,而不是列出

[]之间的输入是可变的,来自另一页。这工作正常。

它一直在说我必须添加更多信息,但我不知道应该添加哪些内容才能使其更加清晰。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>MAINTITLE:: [TITEL] </title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
      <style type="text/css" title="currentStyle"> 
       @import "assets/bootstrap/css/bootstrap-responsive.min.css"; 
       @import "assets/bootstrap/css/bootstrap.min.css"; 
       @import "assets/css/main.css"; 
      </style> 
      <script type="text/javascript" language="javascript" src="assets/jquery/jquery.js"></script> 
      <script type="text/javascript" language="javascript" src="assets/bootstrap/js/bootstrap.min.js"></script> 
      <script type="text/javascript" language="javascript" src="assets/js/page.default.js"></script> 
      </script> 
    </head> 
    <body> 
      <div class="top-bar"> 
       <div class="logo"></div> 
      </div> 
      <div class="title-bar"> 
      </div> 
     <div class="container"> 
     <div class="row clearfix"> 
       <div class="col-md-12 column"> 
        <div class="row" style="margin-top: 180px !important"></div> 
        </div> 
       </div> 
     </div> 
     <div class="container"> 
       <div class="row clearfix"> 
       <div class="col-md-12 column"> 
        <div class="row"> 
         <div class="col-md-4"> 
          <div class="thumbnail"> 
           <img alt="300x200" src="[PICTURE]" width="300" /> 
           <div class="caption"> 
            <h3> 
             [NAME] 
            </h3> 
            <p> 
             [TEXT] 
            </p> 
            <p> 
             <a class="btn btn-primary" href="index.php?action=DETAILPAGE&id=[_ID]">Go!</a> 
            </p> 
           </div> 
          </div> 
         </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html> 

回答

0

围绕所有列创建一个类行div。你有三行,这就是为什么每列都在一个单独的行上。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>MAINTITLE:: [TITEL] </title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <style type="text/css" title="currentStyle"> 
      @import "assets/bootstrap/css/bootstrap-responsive.min.css"; 
      @import "assets/bootstrap/css/bootstrap.min.css"; 
      @import "assets/css/main.css"; 
     </style> 
     <script type="text/javascript" language="javascript" src="assets/jquery/jquery.js"></script> 
     <script type="text/javascript" language="javascript" src="assets/bootstrap/js/bootstrap.min.js"></script> 
     <script type="text/javascript" language="javascript" src="assets/js/page.default.js"></script> 
     </script> 
</head> 
<body> 
     <div class="top-bar"> 
      <div class="logo"></div> 
     </div> 
     <div class="title-bar"> 
     </div> 
    <div class="container"> 
    <div class="row"> 
        <div class="col-md-1"> 
         <div class="thumbnail"> 
          <img alt="300x200" src="[PICTURE]" width="300" /> 
          </div> 
          </div> 

          <div class="caption"> 
           <div class="col-md-1"> 
           <h3> 
            [NAME] 
           </h3> 
           </div> 
           <div class="col-md-1"> 
           <p> 
            [TEXT] 
           </p> 
           </div> 
           <div class="col-md-1"> 
           <p> 
            <a class="btn btn-primary" href="index.php?action=DETAILPAGE&id=[_ID]">Go!</a> 
           </p> 
           </div> 
          </div> 


      </div> 
      </div> 
</body> 

+0

你能帮忙,也许我在哪里,我应该开在这个特定代码关闭这个班?因为我试图在所有列之前打开它,并在最后关闭它,但没有结果。 – Robbert

+0

像我如何编辑答案应该工作 – Totals

+0

我仍然看到他们在彼此的顶部,而不是彼此相邻。以及背景和标题栏都不可见。 – Robbert