html - 使用 CSS 在 DIV 中定位元素

Question

我承认，我不太擅长 CSS。一定是我缺乏设计技巧。 所以我正在尝试完成四个小任务。

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

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

很抱歉成为一个问题中有四个问题的烦人的人。感谢您的帮助!

这是一个更新的 jsfiddle 链接:http://jsfiddle.net/n2learning/xMsrN/22/ 跟进问题和评论 -

1. “锻炼描述”仍然被夸大了。试图让它显示在顶行下方，其中包括“时间”和“ID”。顶行还将(最终)包含小图像符号。
2. 我刚刚注意到图像尺寸不同。我尝试修改“.routineImage”以赋予它宽度和高度属性，但这样做搞砸了。如何/在哪里标准化每个图像的大小？ (图片来自youtube和其他视频源)

Answer 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 来完成，解决方案 here