0

我承认，我不擅长 CSS。一定是我缺乏设计能力。所以我正在努力完成四项小任务。

  1. 移动时间框（即“01:04”和“12:13”）使其浮动到图像的右上边缘？
  2. 将锻炼的描述移动到时间框和routineID下方的图像右侧？
  3. 允许类“例程”的底部边框始终位于图像的正下方，就像它位于图像的顶部一样。
  4. 即使在描述中添加了更多文本，也保持类“例程”的大小相同。我希望每个“例程”都具有相同的宽度和高度尺寸。

我在这里列出了所有内容：http: //jsfiddle.net/n2learning/xMsrN/

很抱歉成为一个问题中有四个问题的烦人。任何帮助表示赞赏！

这是一个更新的 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 回答