Question

我想这样做，因此两个h1元素是div上的标题/标题。所以每个人都在特定的div之上。

    <div class="test">
        <h1 style="color: white; margin:0 auto;">Youtube</h1>
        <h1 style="color: white; margin:0 auto;">Achievements</h1>
        <div class="BoxHolder" style="width: 420px; height: 345px; float: left; padding: 15px 10px; display: block;">
            <embed width="420" height="345" src="http://www.youtube.com/v/XGSy3_Czz8k" type="application/x-shockwave-flash">
        </div>
        <div class="BoxHolder" style="width: 420px; height: 345px; float: right; padding: 15px 10px; display: block;">
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>

        </div>
    </div>

这是我的CSS：

    .main {
        width:auto;
        height:262px;
        margin-bottom:50px
    }
    .boxholder{
        margin:0 auto;
        height:300px;
        width:935px;
        border:1px solid #2F2F2F;
        box-shadow:inset 0px 0px 15px #181818
    }
    .test{
        width:902px;
        margin: 0 auto 50px;
    }
    .mascotlinks img {
         height:100%;
         width:33%;
         position:left;
     }
    .achievements {
        height:7%;
    }

另外请务必给我一些关于改进此代码以及其他任何内容的指示。我是新手。谢谢。

Answer 1

不是100％肯定你在寻找什么，但我做了一个jsfiddle所以你可以看看。 http://jsfiddle.net/kriscoulson/ocekg2oc/

您需要做的就是使用h1并将它们放在.BoxHolder类下面。

    <div class="BoxHolder" style="width: 420px; height: 345px; float: left; padding: 15px 10px; display: block;">
        <h1>Youtube</h1>
        <embed width="420" height="345" src="http://www.youtube.com/v/XGSy3_Czz8k" type="application/x-shockwave-flash">
    </div>
    <div class="BoxHolder" style="width: 420px; height: 345px; float: right; padding: 15px 10px; display: block;">
        <h1>Achievements</h1>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>

    </div>
</div>

另外你应该尝试裁掉你可以在css中完成所有这些的内联样式，并让你的代码更清晰。 H1标签只应用于标题，例如当您访问主页时。尝试使用h2标签并使用css

设置样式

h2 {
font-size:42px
}

Answer 2

你可以建立2个盒子漂浮，一个左边一个然后清除它们。每个框都有里面的标题和代码。这是一个例子：

HTML：

<div class="wrapper">
    <div class="box box-yt">
         <h1>Youtube</h1>

        <embed width="420" height="345" src="http://www.youtube.com/v/XGSy3_Czz8k" type="application/x-shockwave-flash" />
    </div>
    <div class="box box-achiev">
         <h1>Achievement</h1>

        <div class="content-achiev">
            <ul>
                <li>Achievement NO.1</li>
                <li>Achievement NO.2</li>
                <li>Achievement NO.3</li>
                <li>Achievement NO.4</li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
</div>

CSS：

body {
    background-color: black;
    color: white;
}
.wrapper {
    width: 700px;
    margin: 0 auto;
}
.wrapper .box-yt {
    float: left;
}
.wrapper .box-achiev {
    float: right;
}
.wrapper .box h1 {
    text-align: center;
    font-size: 18px;
}
.wrapper .clear {
    clear: both;
}
.content-achiev ul {
    list-style-type: none;
    width: 220px;
}
.content-achiev li {
    text-align: center;
    border-bottom: 1px solid white;
    padding: 10px;
    margin-top: 4px;
}

此外，如果你不想把内部成就放在其他任何东西上，只有一些文字和链接使用一个列表，就像我一样。

Div标题/标题

2 个答案: