Split Div Into 2 Columns Using CSS

后端 未结 14 1753
故里飘歌
故里飘歌 2020-11-29 18:01

I have been attempting to split a div into two columns using CSS, but I have not managed to get it working yet. My basic structure is as follows:

相关标签:
14条回答
  • 2020-11-29 18:38

    Best way to divide a div vertically --

    #parent {
        margin: 0;
        width: 100%;
    }
    .left {
        float: left;
        width: 60%;
    }
    .right {
        overflow: hidden;
        width: 40%;
    }
    
    0 讨论(0)
  • 2020-11-29 18:44

    Divide a division in two columns is very easy, just specify the width of your column better if you put this (like width:50%) and set the float:left for left column and float:right for right column.

    0 讨论(0)
  • 2020-11-29 18:46

    When you float those two divs, the content div collapses to zero height. Just add

    <br style="clear:both;"/>
    

    after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.

    0 讨论(0)
  • 2020-11-29 18:46

    For whatever reason I've never liked the clearing approaches, I rely on floats and percentage widths for things like this.

    Here's something that works in simple cases:

    #content { 
      overflow:auto; 
      width: 600px; 
      background: gray; 
    } 
    
    #left, #right { 
      width: 40%; 
      margin:5px; 
      padding: 1em; 
      background: white; 
    } 
    
    #left  { float:left;  }
    #right { float:right; } 
    

    If you put some content in you'll see that it works:

    <div id="content">
      <div id="left">
         <div id="object1">some stuff</div>
         <div id="object2">some more stuff</div>
      </div>
    
      <div id="right">
         <div id="object3">unas cosas</div>
         <div id="object4">mas cosas para ti</div>
      </div>
    </div>
    

    You can see it here: http://cssdesk.com/d64uy

    0 讨论(0)
  • 2020-11-29 18:47

    None of the answers given answer the original question.

    The question is how to separate a div into 2 columns using css.

    All of the above answers actually embed 2 divs into a single div in order to simulate 2 columns. This is a bad idea because you won't be able to flow content into the 2 columns in any dynamic fashion.

    So, instead of the above, use a single div that is defined to contain 2 columns using CSS as follows...

    .two-column-div {
     column-count: 2;
    }
    

    assign the above as a class to a div, and it will actually flow its contents into the 2 columns. You can go further and define gaps between margins as well. Depending on the content of the div, you may need to mess with the word break values so your content doesn't get cut up between the columns.

    0 讨论(0)
  • 2020-11-29 18:50
    1. Make font size equal to zero in parent DIV.
    2. Set width % for each of child DIVs.

      #content {
          font-size: 0;
      }
      
      #content > div {
          font-size: 16px;
          width: 50%;
      }
      

    *In Safari you may need to set 49% to make it works.

    0 讨论(0)
提交回复
热议问题