Question

在我花了将近三个小时，只是试图格式化三列之后，我的生活从来没有变得更加生气。我刚刚开始使用html，我不知道为什么我在列上遇到这么多麻烦。我似乎无法将它们送到我想要的地方。我只是试图让3列包含一些文本，每个文本都有一个带有圆边的边框。它们应该都是相同的大小，文本边缘居中等等。然后我打算让它们像滚动时改变颜色一样，但我甚至不能做第一部分。

我发现了这个：http://jsfiddle.net/6nVdT/

THE CODE SHOULD BE LINKED IT'S KIND OF LONG

有点类似于我想要的东西，即使我复制粘贴它也是不同的。我不知道我做错了什么。我复制粘贴，就像在我所有的尝试中，文本非常不明显，盒子都是不同的大小，他们不占用整个区域。请帮帮我。

Answer 1

你错过了CSS。

要使示例正常工作，请将CSS放在HTML文件中的样式标记中。

http://www.w3schools.com/css/css_howto.asp

<style>
    /*CSS goes here*/
</style>

Answer 2

在一个新的html文件中尝试这个，也许你没有正确放置css或者你现有的css正在影响它。

<style type="text/css">
    div.col-w {
        position:relative;
        float:left;
        background-color: #FFF;
        border: 8px solid #B2A68E;
        padding: 10px;
        -moz-border-radius: 8px;
    border-radius: 8px;
        width:28%;
    }
    div.col-w div.col-w {
        width: 100%;
        margin-top:-18px;
        margin-bottom:-18px;
    }
    div.col-w2 {
        left:100%;
        margin-left:23px;
    }
    div.col-w3 {
        left:100%;
        margin-left:23px;
    }

    div.col-w.col-b {
        font-size: 0;
        height: 8px;
    }

    div.col-w div.col-h {
        position:relative;
        float: left;
        width:100%;
        margin-right: -100%;
    }
    div.col-1 {
        left:-200%;
        margin-left:-83px;
    }
    div.col-2 {
        left:-100%;
        margin-left:-43px;
    }
</style>

</head>
<body> 
    <div class="col-w">
        <div class="col-w col-w2">
            <div class="col-w col-w3">
                  <div class="col-h col-1">
                    <h2>About Us</h2>
                    <p>Founded in 1995 in Atlanta, Georgia, The Creative Circus is an accredited, two-year, portfolio-building, educational program for the creative side of the Advertising, Interactive Development, Design and Photography industries. Located in an energetic, converted warehouse that feels more like an agency, design firm or studio than a traditional school, future creatives build portfolios that help them land the best jobs in the field.</p>
                    <p><a href="http://www.creativecircus.edu">Find out more about us.</a></p>
                  </div>
                  <div class="col-h col-2">
                    <h2>Admissions</h2>

                    <p>The Creative Circus is committed to seeking out and enrolling applicants of high standard. Our school follows a selective admissions process which includes a required admissions interview and portfolio submission. Admission is based on your commitment and dedication to your field of interest as determined by an admissions interview. This selection process allows us to provide a unique creative learning environment filled with the “best-prepared, most avidly sought-after creatives in the industry.”</p>
                  </div>
                  <div class="col-h col-3">
                    <h2>Programs of Study</h2>
                    <p>Since 1995, we’ve seen a lot of changes.  But through all the trends, we still have one mantra – concept is king. Whether you come for Art Direction, Copywriting, Design, Image or Interactive Development, original ideas are what get you hired.</p>
                    <p>For more information about what we teach and why, please <a href="http://www.creativecircus.edu">download our Course Catalog</a></p>
                  </div>
            </div>
        </div>
    </div>
</body>

列周围的圆形边框引导问题

2 个答案: