在容器 div 中并排浮动 2 列

【问题标题】：floating 2 columns side byside in container div在容器 div 中并排浮动 2 列
【发布时间】：2013-04-29 20:17:15
【问题描述】：

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

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

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

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

    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：

 <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:60% 推动 column_r，但它现在覆盖了页脚。

【问题讨论】：

  • 您可以设置一个小提琴来说明您的问题吗？

标签： css html containers


【解决方案1】：

你忘记清除浮动了。

添加

#footer { clear: both; }

它会解决问题。

【讨论】：

  • 我已经这样做了，它工作了，但现在我正试图让 div fb 工作，以便它显示在页脚中
  • 我没有看到 facebook 插件的 javascrip 代码...你忘了添加它？
【解决方案2】：

添加

float:left;

到#wrapper CSS 类将使包含外部的 div 扩展以容纳文章的内容。

您仍然需要处理一些遗留的样式问题，但希望这可以帮助您解决问题。

【讨论】：

    【解决方案3】：

    添加规则'clear: both;到页脚 css 样式，应该可以解决问题！

    【讨论】：

      猜你喜欢
      • 2013-08-19
      • 2010-10-08
      • 2016-05-04
      • 1970-01-01
      • 1970-01-01
      • 2011-04-06
      • 1970-01-01
      • 2013-05-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode