个人中心
gpt4 book ai didi

html - 简单的 CSS : Making column backgrounds line up

转载 作者：行者123 更新时间：2023-11-28 17:36:11 24 4
gpt4 key购买 nike

我知道这对于有 CSS 经验的人来说很容易。我在这里制作了我的代码模型来展示我所拥有的。我试图让背景颜色，粉红色和绿色，延伸到白色列的底部......或者最长的那个。我认为 clear:both 都可以，但我遗漏了一些我知道很简单的东西。感谢帮助，期待窃笑。

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>

最佳答案

一种解决方案是将左右列都放在 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

关于html - 简单的 CSS : Making column backgrounds line up，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25046764/

24 4 0
文章推荐： python - 限制(许可)Django 员工用户更改模型的某些字段
文章推荐： iphone - setUserTrackingMode 在 MKMapView 上带有注释很慢
文章推荐： javascript - jQuery 确保一个函数先于所有其他函数运行的最佳方法
文章推荐： iphone - UVIews 缩放 UIScrollview 时的比例
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com