0

私はcssに少し慣れていないので、本のリストを表示するレイアウトを作成しようとしています。したがって、2列のレイアウトの左側にカバー画像（フィドルでは固定幅のdivで表されます）を表示したいと思います。表紙の右側に、本に関する情報を示したいと思います。タイトルと、プロパティ値のアイテムを含む順序付きリストです。

これらのアイテムは、幅の残りの部分を埋める必要があります。プロパティとそれに対応する値は、同じ行に配置する必要があります。

プロパティ値アイテムの1つには、ここではスパンで表されているボタンも含まれています。ボタンは、プロパティの直後の同じ行に配置する必要があります。

私はいくつかの問題に遭遇しましたが、これまで解決できませんでした。

  • プロパティリストが正しくフォーマットされていません。これは、包含リスト項目を全幅に拡張するように構成できなかったためだと思います。最後に、プロパティ値アイテムを同じ行に表示する必要があります。

  • タイトルには下線が引かれていますが、下線が体の全幅に広がっていることを確認したいと思います。現在、それは切り捨てられており、それを実現する方法を見つけることができませんでした。

問題を示すフィドルを作成しました：http：//jsfiddle.net/7Xeb7/3/

これが私の基本的なhtml構造です。

<body>
    <ul class="book">
        <li>
            <div class="cover"></div>
        </li>
        <li class="bookdetail">
            <div class="title">Title</div>
            <ol class="attributes">
                <li>
                    <span class="property">property <span>btn</span></span>
                    <span class="value">value</span>
                </li>
                <li>
                     <span class="property">property</span>
                    <span class="value">value</span>
                </li>
            </ol>
        </li>
    </ul>
</body>
4

3 に答える 3

1

簡潔な答え

あなたの HTML は必要以上に複雑で、実際にはリストではないものに対してリスト要素を非正統的に使用しています。単純化すると、ページのスタイリングが簡単になります。私はこのjsFiddleでそうしました。ここでは、 http://jsfiddle.net/7Xeb7/10/ に適切なパディングを絶対に配置して追加することで、問題が解決されたと思い.coverます。（編集：新しいjsfiddleはコメントを反映しています）.bookdetails

長い答え

使用する HTML タグは、可能な限り、それらが表すコンテンツと意味的に関連している必要があります。そのため、リストにはulまたはを使用し、画像には を使用し、見出しには見出しタグ ( 、など) を使用します。ここで sを使用する必要はありません(このセマンティック ロジックに違反するため、一般的にレイアウトには嫌われます)。ここでは、構造と CSS クラスを保持していますが、より論理的なタグを使用しています。olimgh1h2table

    <div class="book">
        <img class="cover" src="" alt="Book Title Here" />
        <div class="bookdetail">
            <h2 class="title">Title</h2>
            <ol class="attributes">
                <li>
                    <span class="property">property</span> <!-- this span wasn't closed before! -->
                    <span class="button">btn</span></span>
                    <span class="value">value</span>
                </li>
                <li>
                    <span class="property">property</span>
                    <span class="value">value</span>
                </li>
            </ol>
        </div><!-- /.bookdetail -->
    </div><!-- /.book -->

HTML がクリーンアップされると、必要な CSS の変更をより簡単に行うことができます。あなたの主な問題は.bookdetail、適切な場所にいることです。.cover現時点では、固定幅要素 ( ) と可変幅要素 ( )のバランスをとろうとしているため、固定幅要素.bookdetailを除いて、コンテナー全体を占めるようにするのは困難です。

これは、 を完全に配置することでかなり簡単に解決できる.coverため、 内の他の要素の配置には影響しなくなります.book。次に、.bookdetail のパディングを設定することができます。0 0 0 140pxこれは、指定された位置を持つ最新の親要素に対して自動的に相対的になります.book。したがって、必要に応じ.bookdetailて塗りつぶしbookますが、右側のパディング (または必要に応じてマージン) は、表紙の画像と重ならないことを意味します。

.title の表示を改善し、HTML の変更に対応するために、jsFiddle に表示される他のいくつかの CSS の変更も行いましたが、主な問題の解決には直接関係しないため、そのままにしておきます。

于 2013-03-05T22:48:07.457 に答える
1

divとを使用して、それに応じてレイアウトを変更しましたtables

<div class="leftColumn">

    </div>

    <div class="rightColumn">
        <div class="header">
            Title
        </div>

        <div class="content">
            <table width="100%">
                <tr><td>Property1<td><td>Value</td>
                <tr><td>Property2<td><td>Value</td>
                <tr><td>Property3<td><td>Value</td>
            <div>
 </div>

とcss

.leftColumn
{
    float:left;
    width:30%;
    height:250px;
    background-color:red;
}
.rightColumn
{
    float:right;
    width:70%;
    height:250px;
    background-color:green;
}
.header
{
    font-size:25px;
    padding:15px;
    height:30px;
    verticle-align:middle;
    border-bottom:1px solid #ccc;    
}

ここを見てください

于 2013-03-05T22:09:40.370 に答える
0

寸法の幅属性がありませんが、これがどのように表示されるかはわかりません:

http://jsfiddle.net/Riskbreaker/7Xeb7/4/

width: 100% を追加しましたbookdetailクラス

.bookdetail {
    vertical-align:top;
    display: inline-block;
    width: 100%;
}
于 2013-03-05T21:58:27.180 に答える