0

私は新進の Web デザイナーであり、自分のデザインをコードに変換するのに常に苦労しているわけではありませんが、今日サイトで作業していると、問題に遭遇しました。<li>リスト要素内に 2 つの div をネストしようとしています。<li>1 つは要素の高さ全体にまたがり、もう 1 つfloat: left;の div には 2 行のテキストが含まれているようにしたいと思いますfloat: right;。私がやろうとしていることはかなり単純だと思いますが、何らかの理由で、これを適切に機能させるのに本当に苦労しています。基本的にはカレンダー イベントのリストを作成しているだけですが、最終的には PHP を使用して Google カレンダーからデータを取得し、以下に示すサンプル情報を再入力します。

リストを次のように表示しようとしています。

リストのデザイン例

コードを機能させるために、当面は CSS の Google Webfont をArial BlackとArialだけに置き換えたことを覚えておいてください。クラス フォントにはArial Blackを使用し、.dayクラス フォントにはArialを使用する必要があります.info(別名、時間と場所の線)。

どんな助けでも大歓迎です！ありがとう！！

HTML:

<ul class="gcal">
    <li>
        <div class="gcal-event">
            <div class="day">
                6.07
            </div>
            <div class="info">
                <span class="time">8pm-10:30pm</span><br />
                    456 Fake Ln. Blvd., New York, NY
            </div>
        </div>
    </li>
    <li>
        <div class="gcal-event">
            <div class="day">
                7.12
            </div>
            <div class="info">
                <span class="time">6pm-7pm</span><br />
                    123 Fake Ln., Chicago, IL
            </div>
        </div>
    </li>
</ul>

CSS:

ul.gcal {
    list-style: none;
    padding: 0 0 0 15px;
}

ul.gcal li {
    padding: 0 0 0 50px;
    display: block;
}

.gcal-event {
}

.day {
    float: left;
    width: 150px;
    text-align: right;
    padding: 7px 0 0 0;
    font-family: 'Arial Black', sans-serif;
    font-size: 48px;
    line-height: 0.6em;
}

.info {
    float: right;
    width: 640px;
    text-align: left;
    padding: 0 0 0 10px;
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    line-height: 1em;
}

.info span.time {
    font-weight: bold;
}
4

3 に答える 3

2

フローティングされていない要素内のフローティング要素は、問題を引き起こします。何が起こっているのかを把握しようとするときに、コードに背景色または境界線を追加すると役立つことがわかりました。<li>すべての要素に背景色を追加すると、が欠落していることがわかります。ブラウザが含まれている要素がどこにあるかを判断できるようにするには、フロートでグループ化する必要があります。いくつかのオプションがあります

ul.gcal li {
    padding: 0 0 0 50px;
    display: block;
    background-color: red;
    float: left;
}

または、フローティングコンテンツの下部にクリアを追加します。

<li>
    <div class="gcal-event">
        <div class="day">
            7.12
        </div>
        <div class="info">
            <span class="time">6pm-7pm</span><br />
                123 Fake Ln., Chicago, IL
        </div>
    </div>
    <br clear="all">
</li>

プロパティはもうclear="all"推奨されていません (代わりに、次の要素で明確なクラスを使用することになっています.clear { clear:both; }) が、私はまだ時々使用します。つまり...いいえ、私はしません! !ho 言った私がした?? 中傷！

ここにフィドルがありますhttp://jsfiddle.net/WkBgg/

私が気づいたもう1つのことは、float:right;幅がハードコーディングされていることです。ブラウザー (モバイル ブラウザーなど) のサイズによっては、その上のコンテンツと奇妙な位置合わせが発生する場合があります。この 2 つを一致させる方法を再考することをお勧めします。フィドルでは、ウィンドウを 640px 未満に縮小すると、私の言いたいことがわかります。

于 2012-06-14T21:12:40.957 に答える
2

これは、lis が高さを失っているためです。フローティングの子は、親の高さに影響しません。これを解決するoverflow: hiddenには、 s に追加します。li

ul.gcal li {
    padding: 0 0 0 50px;
    display: block;
    overflow: hidden;
}

フィドル

于 2012-06-14T19:59:09.813 に答える
0

そのようなものを試してみてください：jsfiddle。私の例があなたを助けるかもしれません。さらに何か必要な場合は、私に尋ねてください。

于 2012-06-14T20:00:17.803 に答える