Question

更新：它无法工作的原因是因为宽度为100％的元素位于div class =“container”元素中。删除那个修复了问题！（没有足够的代表自己回答这个问题，只是想让观众知道它已经解决了。）

我正在自学蓝图css框架，我遇到了以下html / css的问题。我似乎无法在类bigBox中填充页面宽度的100％（它向右填充100％，但它与左侧的其他内容对齐。）

我怎样才能让它以预期的方式运作？谢谢！

<head>
    <title>Hello</title>
    <!-- screen is default blueprint framework file -->
    <link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection" />  
    <!-- import custom styles -->
    <style>
        #topmenu {float:right; margin-top: 50px; /*margin-right: -30px;*/}
        #topmenu ul {list-style: none outside none; }
        #topmenu ul li { display: inline;  }
        #topmenu ul li a { text-decoration: none;  
                           padding: 5px;}
        #topmenu .last { padding-right: 0px; }
        #topmenu .current { font-weight: bold; }

        .bigBox { width: 100%; position: absolute;
                 background-color: blue; height: 430px;
                }
    </style>
</head>

<body>
    <div class="container">

        <!-- logo -->
        <div class="span-12">
            <h1>Hello World</h1>
        </div>

        <!-- top menu -->
        <div class="span-12 last">
            <nav id="topmenu">
                <ul>
                    <li class="current"><a href="">Option 1</a></li>
                    <li><a href="">Option 2</a></li>
                    <li><a href="">Option 3</a></li>
                    <li class="last"><a href="">Option 4</a></li>
                </ul>
            </nav>
        </div>      

        <br class="clear"/>
        <div class="bigBox">
            <div class="span-14">
                <h2>Content Left</h2>
            </div>
            <div class="span-10 last">
                <h2>Content Right</h2>
            </div>
        </div>


    </div>
</body>

Answer 1

“它无法工作的原因是因为宽度为100％的元素位于div class =”container“元素内。删除它解决了问题！”

回答并为你做了CW。

100％宽度背景仅向右填充

1 个答案: