How to place div side by side

前端 未结 7 1809
时光说笑
时光说笑 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:50

    You can use CSS grid to achieve this, this is the long-hand version for the purposes of illustration:

    div.container {
        display: grid;
        grid-template-columns: 220px 20px auto;
        grid-template-rows: auto;
    }
    
    div.left {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: row1-start
        grid-row-end: 3;
        background-color: Aqua;
    }
    
    div.right {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end; 1;
        background-color: Silver;
    }
    
    div.below {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end; 2;
    }
    <div class="container">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="below">Below</div>
    </div>

    Or the more traditional method using float and margin.

    I have included a background colour in this example to help show where things are - and also what to do with content below the floated-area.

    Don't put your styles inline in real life, extract them into a style sheet.

    div.left {
        width: 200px;
        float: left;
        background-color: Aqua;
    }
    
    div.right {
        margin-left: 220px;
        background-color: Silver;
    }
    
    div.clear {
        clear: both;
    }
        <div class="left"> Left </div>
        <div class="right"> Right </div>
        <div class="clear">Below</div>

    <div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
    <div style="margin-left: 220px; background-color: Silver;"> Right </div>
    <div style="clear: both;">Below</div>
    
    0 讨论(0)
提交回复
热议问题