Question

我知道对于有CSS经验的人来说这很容易。我在这里模拟了我的代码以显示我的代码。我试图获得背景颜色，粉红色和绿色，延伸到白色柱的底部......或者最长的那个。我认为很清楚：两者都有用，但我错过了一些我认识的简单的东西。帮助赞赏，士力架预期。

JSFiddle

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color:lightblue;
            }

            #mainColumn {   
                float: left;
                margin-left: 0;
                margin-right: 0;
                width: 830px;
                background-color: white;
            }

            #leftColumn {    
                float: left;
                margin-left: 0;
                margin-right: 0;
                width: 195px; /* modified - shortened */
                background-color:pink;
            }

            #rightColumn {
                float: left;
                width: 195px;
                background-color:green;
            }

            #myWrapper {
                background-color: black;    
            }

            .clearit {
                clear: both;
            }
        </style>    
    </head>

    <body>
        <div id="myWrapper">
            <div id="leftColumn">
                some content
            </div>
            <div id="mainColumn">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper urna a magna euismod, vitae dapibus justo feugiat. Pellentesque ac dui lorem. Fusce ligula urna, ultrices a lectus sit amet, luctus semper est. Curabitur a egestas elit, vitae tincidunt elit. Donec quis nunc id nibh fermentum lobortis egestas id eros. Aenean eget purus erat. In auctor, ipsum in dapibus imperdiet, nulla elit posuere neque, ultrices convallis ligula odio eget felis. Maecenas quis turpis nulla. Nam a velit non lorem semper tincidunt eget iaculis sem. Donec vitae venenatis libero. Duis consequat augue sed sapien cursus dapibus.
            </div>
            <div id="rightColumn">
                even more content
            </div>
        </div>
        <div id="EvenUp" class="clearit">
        </div>
        <p> On with life </p>
    </body>

Answer 1

一种解决方案是将左右列放在mainColumn内并使用display:table和display:table-cell

<强> CSS

body {
    background-color:lightblue;
}
#mainColumn {
    margin-left: 0;
    margin-right: 0;
    width: 830px;
    background-color: white;
    display: table;
}
#leftColumn {
    display: table-cell;
    margin-left: 0;
    margin-right: 0;
    width: 195px;
    /* modified - shortened */
    background-color:pink;
}
#rightColumn {
    display: table-cell;
    width: 195px;
    background-color:green;
}
#myWrapper {
    background-color: black;
}
.clearit {
    clear: both;
}

fiddle

简单的CSS：使列背景排列

1 个答案: