How to place div side by side

前端 未结 7 1808
时光说笑
时光说笑 2020-11-22 15:47

I have a main wrapper div that is set 100% width. Inside that i would like to have two divs, one that is fixed width and the other that fills the rest of the space. How do i

相关标签:
7条回答
  • 2020-11-22 16:27

    There are many ways to do what you're asking for:

    1. Using CSS float property:

     <div style="width: 100%; overflow: hidden;">
         <div style="width: 600px; float: left;"> Left </div>
         <div style="margin-left: 620px;"> Right </div>
    </div>

    1. Using CSS display property - which can be used to make divs act like a table:

    <div style="width: 100%; display: table;">
        <div style="display: table-row">
            <div style="width: 600px; display: table-cell;"> Left </div>
            <div style="display: table-cell;"> Right </div>
        </div>
    </div>

    There are more methods, but those two are the most popular.

    0 讨论(0)
  • 2020-11-22 16:36
    <div class="container" style="width: 100%;">
        <div class="sidebar" style="width: 200px; float: left;">
            Sidebar
        </div>
        <div class="content" style="margin-left: 202px;">
            content 
        </div>
    </div>
    

    This will be cross browser compatible. Without the margin-left you will run into issues with content running all the way to the left if you content is longer than your sidebar.

    0 讨论(0)
  • 2020-11-22 16:40

    If you're not tagetting IE6, then float the second <div> and give it a margin equal to (or maybe a little bigger than) the first <div>'s fixed width.

    HTML:

    <div id="main-wrapper">
        <div id="fixed-width"> lorem ipsum </div>
        <div id="rest-of-space"> dolor sit amet </div>
    </div>
    

    CSS:

    #main-wrapper {
        100%;
        background:red;
    }
    #fixed-width {
        width:100px;
        float:left
    }
    #rest-of-space {
        margin-left:101px;
            /* May have to increase depending on borders and margin of the fixd width div*/
        background:blue;
    }
    

    The margin accounts for the possibility that the 'rest-of-space' <div> may contain more content than the 'fixed-width' <div>.

    Don't give the fixed width one a background; if you need to visibly see these as different 'columns' then use the Faux Columns trick.

    0 讨论(0)
  • 2020-11-22 16:41

    CSS3 introduced flexible boxes (aka. flex box) which can also achieve this behavior.

    Simply define the width of the first div, and then give the second a flex-grow value of 1 which will allow it to fill the remaining width of the parent.

    .container{
        display: flex;
    }
    .fixed{
        width: 200px;
    }
    .flex-item{
        flex-grow: 1;
    }
    
    <div class="container">
      <div class="fixed"></div>
      <div class="flex-item"></div>
    </div>
    

    jsFiddle demo

    Note that flex boxes are not backwards compatible with old browsers, but is a great option for targeting modern browsers (see also Caniuse and MDN). A great comprehensive guide on how to use flex boxes is available on CSS Tricks.

    0 讨论(0)
  • 2020-11-22 16:44

    I don't know much about HTML and CSS design strategies, but if you're looking for something simple and that will fit the screen automatically (as I am) I believe the most straight forward solution is to make the divs behave as words in a paragraph. Try specifying display: inline-block

    <div style="display: inline-block">
       Content in column A
    </div>
    <div style="display: inline-block">
       Content in column B
    </div>
    

    You might or might not need to specify the width of the DIVs

    0 讨论(0)
  • 2020-11-22 16:45

    Give the first div float: left; and a fixed width, and give the second div width: 100%; and float: left;. That should do the trick. If you want to place items below it you need a clear: both; on the item you want to place below it.

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