Question

我有一个html5和CSS3流体布局我正在创建

外包装=深绿色

内部内容的边界=黄色

问题是内部元素是从外部父包装器和边框div中断开的。

我希望能够在彼此内部拥有两个父元素，我可以使用阴影和边框设置样式并提供纯色背景。这样我可以改变内部内容的宽度，以提供一个漂亮的周围边框，具有阴影，模糊等额外功能。我喜欢改变外部容器，这为布局提供了更大的灵活性。

每当我尝试创建这样的流畅布局时，外部div被打破并导致它们缩小到所有其他元素下面的页面顶部。这完全违背了我想要完成的目标。

下面是html和嵌入式CSS。我只将它嵌入到这个页面中，以便在设计阶段时更容易使用。

如何适应父包装和边框中的所有元素？

我试图给出98％的边框类宽度“.wrapper .border {”。这将显示2％的父包装，然后另外98％显示.border的直接子元素，以便在第一个内部存在第二个边框。

当查看页面时，看起来有两个边框构成页面外部，宽度为960px。框内的框内的框。最后一个内部框中的所有元素都排成一行，并一直向下居中。

在保持流畅布局的同时，我无法使其工作。我将添加媒体查询以使其成为响应式布局，但我需要首先使用它。

关于为什么这不起作用以及我需要在html和css中更改的内容的任何帮助和指示都会很棒。

 <!doctype html>
 <html lang="en">
    <head>
        <title>Please help fix this layout</title>
        <style type="text/css">

        .wrapper {
            background-color: green;
            width: 100%;
            margin:0 auto;
            max-width: 960px;       
            margin:0 auto;        
        }

    .border {
        width: 98%;
        background-color: yellow;
        border-color: gray;
        -moz-border-radius: 0px 0px 10px 10px;
        -webkit-border-radius: 0px 0px 10px 10px;
        -khtml-border-radius: 0px 0px 10px 10px;
        border-radius: 0px 0px 10px 10px;
        margin: 0 auto; 
    }

    .header{
        width: 98%;
        height: 182px;
        background-color: #9F0;
        margin: 0 auto;   
    }



    .border .nav ul{
        background: #000;
        width: 100%;
        height: 40px;
        margin: 0 auto;
    }

    .border .nav ul li{
        display: inline;
        margin: 0 0 0 5px;
    }

    .nav ul li a:link, .nav ul li a:hover, .nav ul li a:active{
        color: #FFF;
        display: inline-block;
        padding: 10px 25px;
        height: 20px;       
        text-decoration: none;
    }

    .main-content {
        width: 65%;   
        float: left;
    }

    article {
        background: #0FF;
        color: #000;
        padding: 10px;
    }    

    .sidebar{     
        width: 21%;
        float: left;
        background-color: #FC0;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        margin: 0 0 2% 3%;
        padding: 2% 3%;     
    }

    .sidebar2{     
        width: 21%;
        float: left;
        background-color: #FC0;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        margin: 0 0 2% 3%;
        padding: 2% 3%;
         }    

    h1 {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        color: #8B0000;
        padding-left: 10px;
    }

    .wrapper .main-footer{
        float: left;
        width: 100%;
        height: 40px;
        background-color: #666;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        margin: 2% 0;
    }

    .wrapper .main-footer p{
        width: 92%;
        height: 40px;
        margin: 10px auto;
        color: #FFF;
    }   

    </style>
    <!--[if lt IE 9]>
        <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <div class="wrapper">

        <div class="border">

            <div class="header">
                <p class="headText">This is header TEXT</p>
            </div>

            <nav class="nav">
                <ul>
                    <li><a href="#">Home</a></li>                   
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>      

            <div class="main-content">
                <article class="text">
                    <header>
                        <h1>Lorem ipsum dolor sit amet</h1>                     
                    </header>

                    <footer>
                            <h2>Ipsam ornatam regis</h2>
                    </footer>

                    <content>
                        <p>Neptuno ait Cumque ego illum ille. Praesta enim est in lucem concitaverunt in. Tollite autem Apolloni ex hic.</p>
                    <p>Inde flammis ingreditur ad nomine Stranguillio in modo, quique non solutionem innocentem si Ave mea Stet. Ait mea in deinde vero quo contra te finis laeta gavisus ait Cumque hoc ambulare in rei sensibilium iussit in. Christe in modo genito in deinde plectrum anni ipsa codicellos pedes apud libram dabo es audito doctrinis beneficio. Reflexio mihi Tyrum in fuerat eum istam vero diam nostra paupercula possunt in. Petentibus respiciens loco balbutienti servis meo in deinde vero diam nostra praedicabilium subsannio, 'Non potentia feugiat o sanguine concomitatur quia illum vero diam dominum depressit. Sciendum ait mea vero cum. Cui ubi diu perdidi si Ave, die attingit Archistrate tabulas rimatur aurum. Praestetur cubiculo forma non ait mea in modo invenit. 'arripuit plorabis filiam in rei civibus laude clamaverunt donavit beneficio..</p>
                    </content>
                </article>

                <article class="text">
                    <header>
                        <h1>Lorem ipsum dolor sit amet</h1>                     
                    </header>

                    <footer>
                            <h2>Ipsam ornatam regis</h2>
                    </footer>

                    <content>
                        <p>Neptuno ait Cumque ego illum ille. Praesta enim est in lucem concitaverunt in. Tollite autem Apolloni ex hic.</p>
                        <p>Inde flammis ingreditur ad nomine Stranguillio in modo, quique non solutionem innocentem si Ave mea Stet. Ait mea in deinde vero quo contra te finis laeta gavisus ait Cumque hoc ambulare in rei sensibilium iussit in. Christe in modo genito in deinde plectrum anni ipsa codicellos pedes apud libram dabo es audito doctrinis beneficio. Reflexio mihi Tyrum in fuerat eum istam vero diam nostra paupercula possunt in. Petentibus respiciens loco balbutienti servis meo in deinde vero diam nostra praedicabilium subsannio, 'Non potentia feugiat o sanguine concomitatur quia illum vero diam dominum depressit. Sciendum ait mea vero cum. Cui ubi diu perdidi si Ave, die attingit Archistrate tabulas rimatur aurum. Praestetur cubiculo forma non ait mea in modo invenit. 'arripuit plorabis filiam in rei civibus laude clamaverunt donavit beneficio..</p>
                    </content>
                </article>              
            </div>

            <aside class="sidebar">
                <h2>Side1 Content</h2>
            </aside>    

            <aside class="sidebar2">
                <h2>Side2 Content</h2>
            </aside>            
        </div>  

        <footer class="main-footer">
            <p>Footer Text HERE</p>
        </footer>       
    </div>
</body>
</html>

Answer 1

我在youtube上找到了这个答案，这是一个8分钟的视频，详细介绍了旧浏览器，但这适用于我尝试过的所有浏览器。 Video link

将此添加到CSS中，作为要浮动的元素的容器的所有类，并且浮动元素现在将包含在这些容器中。

.NameOfContainer:after{
    content: ".";
    visibility: hidden;
    height: 0;
    clear:both;
    display: block;
}

如何修复CSS3灵活布局子元素突破父母？

1 个答案: