Question

我承认，我对CSS并不擅长。一定是我缺乏设计技巧。所以我想完成四个小任务。

移动时间框（即'01：04'和'12：13'），使其浮动到图像的右上边缘？
移动锻炼说明以显示在时间框和例程ID下面的图像右侧？
允许类'例程'的下边框始终位于图像下方，就像它位于图像顶部一样。
即使添加了更多文字说明，也要保持班级'例程'的大小相同。我希望每个“例程”具有相同的宽度和高度尺寸。

我已经把所有内容都放在了这里：http://jsfiddle.net/n2learning/xMsrN/

很抱歉，在一个问题中有四个问题的那个讨厌的家伙。任何帮助表示赞赏！

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

'锻炼描述'仍然被抬高。试图将其显示在顶行下方，其中包括“时间”和“ID”。顶行还将（最终）包含小图像符号。
我刚注意到图像尺寸不同。我尝试修改'.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

来完成

使用CSS在DIV中定位元素

1 个答案: