2

私は今、これに夢中になっていると思います。解決方法がわかりません...みんなを助けてください。

ページに 3 つの div があり、すべて 1 行に収まる必要があります。それらは正方形 (角が丸い) でなければならないので、1:1 の縦横比を維持するために幅と高さを設定する必要があります。それらの中に見出しがあり、垂直方向と水平方向の中央に配置する必要があります。見出しの文言は変更される可能性があり、2 行にまたがる可能性があるため、この場合、単純なマージントップでは不十分です。

最初の問題：他に影響を与えるものがないにもかかわらず、上部に奇妙なマージンがあります（あるに違いありませんが、何がわかりません）。divをフロートすると、それらが並んでいますが、フロートする方法ではありません.インラインブロックが機能しないのはなぜですか?

2 番目の問題 (関連している可能性が高いので、一度に投稿します) は、タイトル div を垂直方向に中央揃えできないことです。何か案は？

説明するjsfiddleは次のとおりです。http://jsfiddle.net/fydC4/

HTML:

<div id="container">
    <div class="nav-left">
    <p id="nav-left-title">In this section&hellip;</p>
        <ul>
            <li><a class="light" href="#">page title here</a></li>
            <li><a class="light" href="#">page title here</a></li>
            <li><a class="light" href="#">page title here</a></li>
        </ul>
    </div>

    <div id="main">
        <h1>Assignments</h1>
        <p>Click on the titles of the assignments to find out more.</p>
            <div class="box" id="good-designs">
                <h2 class="box"><a href="#">3 good designs</a></h2>
            </div>

            <div class="box" id="temp">
                <h2 class="box"><a href="#">title here</a></h2>
            </div>

            <div class="box" id="temp2">
                <h2 class="box"><a href="#">title here</a></h2>
            </div>
    </div><!--end main-->
</div>
</div><!--end container-->

CSS:

#container {
    max-width: 960px;
    margin: auto;
}
#main {
    display: table-cell;
    width: 73em;
    padding: 1em 2em 2em;
    background-color: white;
}
#nav-left-title {
    padding-bottom: 0.5em;
    margin: 0;
    color: white;
}
.nav-left{
    display: table-cell;
    width: 14em;
    background-color: #87a8b1;
    padding: 1.1em;
    font-size: 1.2em;
}
.nav-left li {
    padding: 0.5em 0;
    border-bottom: 1px solid white;
}
h2.box {
    padding: 15px 0;
    margin: 50% 15px;
    margin: auto;
    text-transform: uppercase;
    text-align: center;
}
div.box {
    padding: 15px;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    margin-top: 25px;
    margin-left: 1.5em;
    display:inline-block;
    /* float: left; */
}
#good-designs {
    background-color: green;
}
#temp, #temp2 {
    background-color: yellow;
}
4

2 に答える 2

0

これは私にとってはうまくいきました.inline-blockをfloat leftに置き換えてください.

また、いくつかの要素でマージンを 2 回呼び出していますが、ここでは必要ありません。jsfiddle.net/fydC4/14 に移動します。

于 2013-10-21T21:35:11.533 に答える