0

確かに、私はCSSがあまり得意ではありません。私のデザインスキルの欠如に違いありません。だから私は4つの小さなタスクを達成しようとしています。

  1. タイムボックス（つまり、「01:04」と「12:13」）を移動して、画像の右上端に浮かぶようにしますか？
  2. タイムボックスとroutineIDの下の画像の右側に表示するワークアウトの説明を移動しますか？
  3. クラス'routine'の下の境界線が、画像の上部と同じように、常に画像の真下になるようにします。
  4. 説明にテキストが追加された場合でも、クラス'routine'を同じサイズに保ちます。すべての「ルーチン」の幅と高さの寸法を同じにします。

私はここにすべてをレイアウトしました：http：//jsfiddle.net/n2learning/xMsrN/

1つの質問に4つの質問があるその迷惑な男になってすみません。どんな助けでも大歓迎です！

更新されたjsfiddleリンクは次のとおりです。http：//jsfiddle.net/n2learning/xMsrN/22/フォロー アップの質問とコメント-

  1. 「ワークアウトの説明」はまだジャッキアップされています。これを一番上の行の下に表示しようとしています。これには「時間」と「ID」が含まれます。一番上の行には、（最終的には）小さな画像記号も含まれます。
  2. 画像のサイズが違うことに気づきました。'.routineImage'を変更して、幅と高さのプロパティを指定しようとしましたが、それを行うと問題が発生しました。各画像のサイズを標準化するにはどうすればよいですか？（画像はYouTubeや他のビデオソースから来ています）
4

1 に答える 1

1 
<ul id="routinefilter">
    <li  class='routine' data-id="15">
        <div class='routineImage'><img src=http://img.youtube.com/vi/UheCchftswc/2.jpg></div>
        <div class="routineTimeID"> <!-- added wrapper to keep it a single row -->
            <div class='routineID'>16</div>
            <div class='routineTime'>01:04</div>
        </div>
        <div class='routineDesc'>Use lighter weights on a barbell due to higher counts</div>
    </li>
</ul>

CSS

#routineframe {
    height: 400px;
    border: dashed;
    font-family: Arial,helvetica,sans-serif;
    cursor: pointer;
    width: 60%;
    overflow: auto;
    }

#routinefilter {
    list-style: none;
    clear: both; /*keeps each <ul> seperate*/
    }

.routine{
    background: #F4F4F4;
    color: #41383C;
    font-size: 18px;
    border:2px solid #666;
    margin:5px;
    padding:5px;
    width: 95%;
    overflow: hidden; /*allows this to contain the floats*/
    }

.routine .routineImage{
    position: relative;
    float: left;
    display: inline;
    margin-left: auto;
    margin-right: auto;
    }

.routine .routineTime{
    position: relative;
    top: 0;
    float: left; /*this was floated the wrong way*/
    margin-left: auto;
    margin-right: 3px;
    border: 1px solid #666;
    background: white;
    color: navy;
    }

.routineTimeID { /*class added to keep the description from being in between the two elements*/
    width:140px;
    float: left;
    }

.routine .routineID{
    top: 0;
    float: right;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #666;
    background: white;
    }

.routine .routineDesc{
   top: 0;
   margin-left: auto;
   margin-right: auto;
   font-size: 16px;
   }

私が行ったすべての変更とその理由を書き留めようとしました。私はそれらすべてを手に入れたと思います...

ただし、最後の質問では、CSSではこれを行うことはできません。私が理解しているように、テキストが追加された場合にテキストサイズを自動的に縮小したいですか？これはJavaScriptで行う必要があります。解決策はここにあります

于 2012-06-22T18:47:39.883 に答える