Html 使用CSS在DIV中定位元素

我承认，我不太擅长CSS。一定是我缺乏设计技巧。 因此，我正在努力完成四项小任务

移动时间框（即“01:04”和“12:13”），使其浮动到图像的右上边缘

将要显示的训练说明移动到时间框和routineID下方图像的右侧

允许类“例程”的底部边框始终位于图像的正下方，就像它位于图像的顶部一样

即使在说明中添加了更多文本，也要保持类“例程”的大小不变。我希望每个“常规”都有相同的宽度和高度尺寸

我把一切都安排在这里：

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

以下是更新的JSFIDLE链接： 跟进问题及意见-

“训练描述”仍然是虚构的。试图将其显示在顶行下方，其中包括“时间”和“ID”。顶行还（最终）包括小的图像符号

我只是注意到图像大小不同。我试图修改“.routineImage”以赋予其宽度和高度属性，但这样做会把事情搞砸。如何/在何处标准化每个图像的大小？（图片来自youtube和其他视频来源）

16
01:04
在杠铃上使用较轻的重量，因为计数较高

CSS

#routineframe{
高度：400px；
边框：虚线；
字体系列：Arial、helvetica、无衬线字体；
光标：指针；
宽度：60%；
溢出：自动；
}
#常规滤波器{
列表样式：无；
清除：两个；/*保持每个
分开*/
}
.例行程序{
背景#f4；
颜色：#41383C；
字号：18px；
边框：2个实心#666；
保证金：5px；
填充物：5px；
宽度：95%；
溢出：隐藏；/*允许它包含浮动*/
}
.常规.常规图像{
位置：相对位置；
浮动：左；
显示：内联；
左边距：自动；
右边距：自动；
}
.例行程序.例行时间{
位置：相对位置；
排名：0；
浮动：左；/*这是以错误的方式浮动的*/
左边距：自动；
右边距：3倍；
边框：1px实心#666；
背景：白色；
颜色：海军蓝；
}
.routineTimeID{/*类的添加是为了防止描述位于两个元素之间*/
宽度：140px；
浮动：左；
}
.常规.常规ID{
排名：0；
浮动：对；
左边距：自动；
右边距：自动；
边框：1px实心#666；
背景：白色；
}
.例行程序{
排名：0；
左边距：自动；
右边距：自动；
字体大小：16px；
}

我试图记下我所做的所有改变以及原因。我想我都拿到了

---

但是，对于最后一个问题，您不能使用CSS来实现这一点。据我所知，如果添加更多文本，您希望文本大小自动缩小吗？这必须使用JavaScript完成，解决方案

1）时间框是否不在图像的右上角？否，训练id在右上角，在时间框的右边。你能给一个你想要它看起来怎么样的图像吗？图片有点模糊-为什么不直接设置

。例程
具有固定的宽度和高度，并给内容div
溢出：auto
在内容超过固定高度时给它一个滚动条？嘿，克里斯蒂娜，这看起来不错。我刚刚添加了右边的边距：2px；到。routineImage，因此它有一点空间。示例中的“说明”仍显示在图像下方。我希望它显示在图像右侧，但在“例行时间”和“ID”值下面。我来看看你的JS示例。我可能会添加类似“更多…”的内容，并允许用户单击以预览更多信息；不应该在那里。不知道那是怎么进来的！将其从
.routineDesc
中删除，即可修复。添加“更多”链接可能是更好的方式。大多数人都希望这样的小片段能被摘录出来。越来越近了……有点像。这里有一个更新的JSFIDLE链接，使用了您的建议：我认为图像是让事情变得糟糕的地方。请注意图像现在是如何越过.routine边框的。训练描述还是有点不对劲。首先，你需要删除注释：）它们不是真正的CSS注释形式，但我这样写的，所以更容易看到：）但是你是对的，是图像把它扔了。由于
.routineTimeID
上有一个硬宽度，因此如果旁边的图像太宽，浏览器会将其推到下一行。如果您知道所有的图像都将是相同的大小，请输入类似这样的内容
.routineImage img{width:120px；}
。（注释现在以正确的CSS注释形式出现）
<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>

#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;
   }