0

「私たちについて」セクションをその下の段落に垂直に揃えようとしています。表示領域を縮小したり、小さい画面から見ようとすると、なぜか、About と Us が 2 つの行に表示され、領域を小さくし続けると、'About Us' が左下にドロップダウンします。段落全体の。

私が考えていた最初の質問は、「About Us」のテキストが 2 行以上に折りたたまれるのではなく、1 行に収まるようにするにはどうすればよいかということです。私の2番目は、段落の下にある「私たちについて」のテキストをドロップせずに、これをスケーラブルにするにはどうすればよいですか?

JSFiddle の私のコードが添付されています。

みんなありがとう！！

http://jsfiddle.net/2L9qU/

これが厄介なhtmlです： 

                <div class="mainContentContainer">
                <div class="mainContent1">
                        <h1>
                ABOUT US
            </h1>

                </div></div>

付随する CSS は次のとおりです。

.mainContentContainer {
    width: 85%
}
.mainContent1 h1 {
    font-family:verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    color:#00245D;
    text-align: left;
    float: left;
    width: 80%;
    min-width: 10%;
}
.mainContent1 {
    color: #000;
    text-align: left;
    max-width: 960px;
    min-width: 100px;
    width: 35%;
}
.mainContent2 {
    color: #000;
    text-align: left;
    max-width: 960px;
    width: 50%;
    margin-left: -6%;
    display: inline-block;
}
4

1 に答える 1

1

あなたのマークアップはかなり乱雑なので、「クリーンアップ」マークアップを使用してより単純なアプローチを試みました ( http://jsfiddle.net/danielecocca/9eJnt/を参照)。

  • HTML

    <div class="table">
    <div class="table-row">
        <ul class="table-cell">
            <!-- left side pane contents here -->
        </ul>
        <div class="table-cell">
            <!-- right side pane contents here -->
        </div>
    </div>
</div>

  • CSS

    .table {
    display: table;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
}

これは、1 つは としてスタイル設定され、もう 1 つは としてスタイル設定され、左側と右側のペイン スタイルは として、いくつかのコンテナーdiv要素を使用します。少し調整するだけで、ニーズに確実に一致するはずです（実際の要素は使用されず、テーブルとして表示され、サイズは問題なく変更されます）。display: tabledisplay: table-rowdisplay: table-celltable

複数の行に分割されるのを避けるために、Serlite の提案を支持しwhite-space: nowrapます&nbsp;。

于 2013-08-07T17:30:44.660 に答える