发表新帖
发表新帖

Simple two column html layout without using tables

后端 未结
关注
12 1705
夕颜
夕颜 2021-01-30 05:17

I\'m looking for a super easy method to create a two column format to display some data on a webpage. How can i achieve the same format as:


    &l         


              相关标签:
       

        

          12条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  无人共我        
                
              
    
                            
    
                2021-01-30 05:27
              
    
            
    
            
    
                                                                       

    You can create text columns with CSS Multiple Columns property. You don't need any table or multiple divs.
    


    HTML
    


    <div class="column">
       <!-- paragraph text comes here -->
</div> 

    


    CSS
    


    .column {
    column-count: 2;
    column-gap: 40px;
}

    


    Read more about CSS Multiple Columns  at https://www.w3schools.com/css/css3_multiple_columns.asp
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  死守一世寂寞        
                
              
    
                            
    
                2021-01-30 05:35
              
    
            
    
            
    
                                                                       

    Well, if you want the super easiest method, just put 
    


    <div class="left">left</div>
<div class="right">right</div>

.left {
    float: left;    
}

    


    though you may need more than that depending on what other layout requirements you have.
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  既然无缘        
                
              
    
                            
    
                2021-01-30 05:37
              
    
            
    
            
    
                                                                       

    I know this question has already been answered, but having dealt with layout a fair bit, I wanted to add an alternative answer that solves a few traditional problems with floating elements...
    


    You can see the updated example in action here.
    


    http://jsfiddle.net/Sohnee/EMaDB/1/
    


    It makes no difference whether you are using HTML 4.01 or HTML5 with semantic elements (you will need to declare the left and right containers as display:block if they aren't already).
    


    CSS
    


    .left {
    background-color: Red;
    float: left;
    width: 50%;
}

.right {
    background-color: Aqua;
    margin-left: 50%;
}

    


    HTML
    


    <div class="left">
    <p>I have updated this example to show a great way of getting a two column layout.</p>
</div>
<div class="right">
    <ul>
        <li>The columns are in the right order semantically</li>
        <li>You don't have to float both columns</li>
        <li>You don't get any odd wrapping behaviour</li>
        <li>The columns are fluid to the available page...</li>
        <li>They don't have to be fluid to the available page - but any container!</li>
    </ul>
</div>

    


    There is also a rather neat (albeit newer) addition to CSS that allows you to layout content into columns without all this playing around with divs:
    


    column-count: 2;

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  礼貌的吻别        
                
              
    
                            
    
                2021-01-30 05:38
              
    
            
    
            
    
                                                                       

    Well, you can do css tables instead of html tables. This keeps your html semantically correct, but allows you to use tables for layout purposes. 
    


    This seems to make more sense than using float hacks. 
    


    <html>
  <head>
    <style>

#content-wrapper{
  display:table;
}

#content{
  display:table-row;
}

#content>div{
  display:table-cell
}

/*adding some extras for demo purposes*/
#content-wrapper{
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  position:absolute;
}
#nav{
  width:100px;
  background:yellow;
}
#body{
  background:blue;
}
</style>

  </head>
  <body>
    <div id="content-wrapper">
      <div id="content">
        <div id="nav">
          Left hand content
        </div>
        <div id="body">
          Right hand content
        </div>
      </div>
    </div>
  </body>
</html>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  夕颜        
                
              
    
                            
    
                2021-01-30 05:38
              
    
            
    
            
    
                                                                       

    This code not only allows you to add two columns, it allows you to add as many coloumns as you want and align them left or right, change colors, add links etc. Check out the Fiddle link also
    


    Fiddle Link : http://jsfiddle.net/eguFN/
    


    <div class="menu">
                <ul class="menuUl">
                    <li class="menuli"><a href="#">Cadastro</a></li>
                    <li class="menuli"><a href="#">Funcionamento</a></li>
                    <li class="menuli"><a href="#">Regulamento</a></li>
                    <li class="menuli"><a href="#">Contato</a></li>
                </ul>
</div>

    


    Css is as follows
    


    .menu {
font-family:arial;
color:#000000;
font-size:12px;
text-align: left;
margin-top:35px;
}

.menu a{
color:#000000
}

.menuUl {
  list-style: none outside none;
  height: 34px;
}

.menuUl > li {
  display:inline-block;
  line-height: 33px;
  margin-right: 45px;

}

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  一个人的身影        
                
              
    
                            
    
                2021-01-30 05:41
              
    
            
    
            
    
                                                                       

    <style type="text/css">
#wrap {
   width:600px;
   margin:0 auto;
}
#left_col {
   float:left;
   width:300px;
}
#right_col {
   float:right;
   width:300px;
}
</style>

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
</div>

    


    Make sure that the sum of the colum-widths equals the wrap width. Alternatively you can use percentage values for the width as well.
    


    For more info on basic layout techniques using CSS have a look at this tutorial
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
   
                                  

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          
        

      

          
 
     
 

        
热议问题