文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >在容器div中并排浮动2列

问在容器div中并排浮动2列
EN

Stack Overflow用户
提问于 2013-04-30 04:17:16
回答 3查看 332关注 0票数 0

我尝试将两个名为column_l和column_r的列并排放在一个about页面上，但我遇到的问题是它会移动并扰乱页脚，并挂在容器div之外。

column_l包含公司信息，而column_r包含图片。

我将展示我的代码，但基本上，主体包含一个容器，我将所有代码放在这个容器上。

为此，我创建了一个包装器来包含这两列。

代码语言：javascript
运行
复制
    body{
    background-image:url('../img/small_logo.jpg');
    background-repeat:repeat;
    position:relative;
    background-position:50% 50%;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    /*padding-left:25px;
    padding-right:25px;*/
    overflow:visible;
    margin:0px auto;
    background-attachment:fixed;
    min-height:100%; 
    width:100%;
    /* FOR A LARGE-SINGLE IMAGE TO STRETCH COMFORTABLY ACROSS A BODY
    -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;*/
    }
#container{
    margin: auto;
    padding:10px;
    background-color:#F5F5DC;
    width:720px;
    border:2px black solid;
    position:relative;
    background-attachment: scroll;
    display:block;
    height:auto;
    margin-bottom:10px;
    padding-bottom:15px

}
#logo{ margin:0;
padding:auto;
position: inherit;
display:block;
height:auto;
width:auto;
}
#wrapper{margin:auto; height:auto; width:100%;}
#column_l {
    width: 60%;
    margin: 0;
    padding: 0;
    background-color: #FFFF99;
    float:left;
}
#column_r {
    width: 40%;
    margin: 0;
    margin-right:0px;
    float: right;
    background-color: #FFFF99;
    position: absolute;
    left:60%;

}

#column_r p {
    font-size: 11px;
    margin: 7px;
}

#nav{
    background-color: #800000;
    margin-left: 0px;
    text-align: center;
    border-top: 2px solid #800000;
    border-bottom: 2px solid #800000;
    padding:10px 0 10px 0;
    font-family:"Buxton Sketch";
    font-size:16px;
}
#rightContainer{
float:right;
margin:0;
padding:0;
border:2px solid;
width:25%;
height:400px;

}
th{font-size:large;
}
#footer{
    margin-left:0;
    padding:10px 0 10px 0;
    text-align:center;
    opacity:0.6em;
    filter:alpha(opacity=60); /* For IE8 and earlier */
    height:40px;
    vertical-align:bottom;
    font-family:"Buxton Sketch";
    font-size:16px;

    }

#copyright{
    margin:auto;
    padding:3px;
    text-align:center;

}
#copyright p{
font-size: 12px;
  color:#000000;

}
#fb {padding:2px;margin:auto; float:left; }

/* Styles for Navigation */
#nav ul {
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
#nav li {
    float: left;
}
#nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 3px;
    padding: 5px;
    display: inline;

}
#nav a:hover {
    border: 1px solid #456;
    background-color: #F0E68C;
    font-size:large;
    color:black;
}
/* Styles for Footer */
#footer ul {
    list-style-type: none;
    width: 100%;
    margin: 0px;
    padding: 5px;
    padding-top:5px;
}
#footer li {
    float: left;
}
#footer a {
    color: black;
    text-decoration: none;
    margin-top: 0px;
    padding-top: 5px;
    display: inline;

}
#footer a:hover {
    border: 1px solid ;
    background-color: #F0E68C;
    font-size:medium;
}

/*Classes */
.largehead h1{font-size:x-large;}
.shadow:before,
        .shadow:after {
            content:"";
            position:absolute;
            z-index:-2;
        }

        .shadow p {
            font-size:16px;
            font-weight:bold;
        }
        .shadow img {
            font-size:16px;
            font-weight:bold;
        }

/* Shadow Style */
.shadow {
 -moz-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;    /*   For Older Versions    */
        -webkit-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;  
        box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;   

        /*                   For  'IE'                                */

        filter:
            progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=0,strength=5)   /*  Top     */
            progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=90,strength=3)    /*  Right   */
            progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=180,strength=3)   /*  Bottom  */
            progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=270,strength=5);/*  Left    */
    }
        -webkit-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;  
        box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;   

        /*                   For  'IE'                                */

        filter:
            progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=0,strength=5)   /*  Top     */
            progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=90,strength=3)    /*  Right   */
            progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=180,strength=3)   /*  Bottom  */
            progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=270,strength=5);/*  Left    */
    }
/* Rotated box*/

        .rotated {
            -webkit-box-shadow:none;
               -moz-box-shadow:none;
                    box-shadow:none;
            -webkit-transform:rotate(-3deg);
               -moz-transform:rotate(-3deg);
                -ms-transform:rotate(-3deg);
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }

        .rotated > :first-child:before {
            content:"";
            position:absolute;
            z-index:-1;
            top:0;
            bottom:0;
            left:0;
            right:0;
            background:#fff;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }

        /* Lifted corners */

        .lifted {
            -moz-border-radius:4px;
                 border-radius:4px;
        }

        .lifted:before,
        .lifted:after {
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
            max-width:300px;
            max-height:100px;
            -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
               -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
                    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform:rotate(-3deg);
               -moz-transform:rotate(-3deg);
                -ms-transform:rotate(-3deg);
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }

        .lifted:after {
            right:10px;
            left:auto;
            -webkit-transform:rotate(3deg);
               -moz-transform:rotate(3deg);
                -ms-transform:rotate(3deg);
                 -o-transform:rotate(3deg);
                    transform:rotate(3deg);
        }

 /* Curled corners */

        .curled {
            border:1px solid #efefef;
            -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
                 border-radius:0 0 120px 120px / 0 0 6px 6px;
        }

        .curled:before,
        .curled:after {
            bottom:12px;
            left:10px;
            width:50%;
            height:55%;
            max-width:200px;
            max-height:100px;
            -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
               -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
                    box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
            -webkit-transform:skew(-8deg) rotate(-3deg);
               -moz-transform:skew(-8deg) rotate(-3deg);
                -ms-transform:skew(-8deg) rotate(-3deg);
                 -o-transform:skew(-8deg) rotate(-3deg);
                    transform:skew(-8deg) rotate(-3deg);
        }

        .curled:after {
            right:10px;
            left:auto;
            -webkit-transform:skew(8deg) rotate(3deg);
               -moz-transform:skew(8deg) rotate(3deg);
                -ms-transform:skew(8deg) rotate(3deg);
                 -o-transform:skew(8deg) rotate(3deg);
                    transform:skew(8deg) rotate(3deg);
        }
        dl.border-around
{
    margin: 2em 0;
    padding: 0;
    width: 20em;
    float:right;
}

.border-around dt
{
    background-color: #131210;
    color: #959289;
    padding: .5em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    border-left: 1px solid #131210;
    border-right: 1px solid #131210;
    border-top: 1px solid #131210;

}

.border-around dd
{
    margin: 0 0 1em 0;
    background: #DBD8D8;
    text-align: center;
    padding: 1em .5em;
    font-style: italic;
    border-left: 1px solid #131210;
    border-right: 1px solid #131210;
    border-bottom: 1px solid #131210;

}

div.wrapperleft{
    float:left;
    position:relative;

    }
}
    div.wrapper{  
        float:right; /* important */  
        position:relative; /* important(so we can absolutely position the description div */  
    }  
    div.description{  
        position:absolute; /* absolute position (so we can position it where we want)*/  
        bottom:0px; /* position will be on bottom */  
        left:0px;  
        width:60%;  
        /* styling bellow */  
        background-color:black;  
        font-family: 'tahoma';  
        font-size:15px;  
        color:white;  
        opacity:0.6; /* transparency */  
        filter:alpha(opacity=60); /* IE transparency */  
    }  
    p.description_content{  
        padding:0px;  
        margin:0px;  
    }  

        /*Feedback*/
form {float:left; width:50%; text-align:left; padding-top:30px;color:white; margin-left:200px; list-style:none;}
textarea {border:0; padding-top:0px; font-family:"Lucida Console";}
input {border:0; padding:0; font-family:"Lucida Console";}
submit {border:0; padding:0; font-family:"Lucida Console";}
label {border:0; padding:0; font-family:"Lucida Console";}
label {float:left; width:150px; text-align:right; display:block;margin-top:5px;}
textarea {border:1px gray solid; margin-left:10px; padding:5px;}
input, datalist {border:1px gray solid; margin-left:10px; padding:5px;}
input {width:280px; margin-bottom:16px;}
textarea {width:280px; height:150px; text-align:justify; margin-bottom:16px;}

#feedback {padding-top:10px; margin-right:100px;}

对于html：

代码语言：javascript
运行
复制
 <body > <!-- START BODY -->
<!-- START CONTAINER -->
    <div id="container" class="shadow lifted"> 
        <div id="logo">  <!-- START LOGO -->
            <img src="img/cropped_logo.jpg" alt="logo" width=720px height=300px />
        </div> <!-- END LOGO -->
        <!-- START NAV-->
    <div id="nav" class="shadow">
        <a href="index.html" > Home</a>
        <a href="menu.html"> Menu</a>
        <a href="wholesale.html">Wholesale</a>
        <a href="story.html">Our Story</a>
        <a href="contact.html">Contact Us</a>
    </div> <!-- END NAV-->
    <div id="wrapper">
    <!-- Begin Left Column -->
        <div id="column_l">
            <h1>Our Story</h1>
            <p> What started out as making ice cream for family and friends, in our home kitchen, quickly flourished into a labor of love and creativity for ice cream aficionado Hugh Balthrop. "For me, ice cream is all about real flavor using natural and local ingredients. This is where the passion is for me. Ice cream brings out the inner kid in everyone". Ever had Sweet Potato Ice Cream with candied pecans? What about lemon sweet tea sorbet? Wild Blueberry Frozen Yogurt? Blackberry or Watermelon Sorbet? The list goes on and on... Where can you find it, you ask? Right now, you can grab some at Oxbow Restaurant, in Clarksdale, MS, Mississippi Grounds and Cleveland Country Club in Cleveland, MS, Delta Bistro and TurnRow Books, in Greenwood, MS.</p>
        </div><!-- End Left Column -->
<!-- Begin Right Column -->
        <div id="column_r">
            <img alt="" height="288" src="img/hugh.jpg" width="193" />
            <p>Hugh Balthrop</p>
        </div><!-- End Right Column -->
        </div><br> <!--end wrapper-->






    <div id="footer" class="shadow lifted">
        <div class="fb-like" data-href="https://www.facebook.com/pages/Sweet-Magnolia-Ice-Cream-Co/303952586284264?fref=ts" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" clear:both></div>


            <a href="index.html">Home</a>
            <a href="menu.html"> Menu</a>
            <a href="wholesale.html">Wholesale</a>
            <a href="story.html">Our Story</a>
            <a href="contact.html">Contact Us</a>
    </div> <!-- end of footer -->
        <div id="copyright" class="lifted">
            <p id="copyright">Sweet Magnolia Ice Cream Company &copy; 2013. All Rights Reserved.</p>
        </div>
</div> <!-- End of Container -->

</body>

</html>

我试着用left来推送column_r :60%，但它现在掩盖了页脚。

css
html
containers
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-04-30 04:20:56

你忘了清理花车了。

添加

代码语言：javascript
运行
复制
#footer { clear: both; }

它会解决这个问题。

票数 1
EN

Stack Overflow用户

发布于 2013-04-30 04:24:38

添加

代码语言：javascript
运行
复制
float:left;

添加到#wrapper中，CSS类将使包含div的外部展开以保存文章的内容。

仍然有一些遗留下来的风格问题你必须处理，但希望这能让你走上正轨。

票数 0
EN

Stack Overflow用户

发布于 2013-04-30 04:26:48

在页脚css样式中添加规则'clear: both；，应该可以做到这一点！

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/16287448

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档