html - 将左浮动视频放在段落底部
问题描述
如果我在 <p> 标签上方放置一个带有 float:right 的 <video> 标签,它看起来像这样:
textextext o------o
textextext | vid |
textextext o------o
textextextextextext
是否有可能让它看起来像这样?
textextextextextext
textextext o------o
textextext | vid |
textextext o------o
我试过做位置:相对和底部:0px,但这没有用。
解决方案
试试这个代码
.container{
}
p.p1{ text-align:left; }
.grid{ display: inline-grid; grid-template-columns: auto auto; }
.grid div{ max-width:50%;}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea </p>
<div class="grid">
<div>
<p>
commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div>
<video src="http://movietrailers.apple.com/movies/universal/jurassic-world-fallen-kingdom/jurassic-world-fallen-kingdom-trailer-1_h1080p.mov" width="300" controls></video>
</div>
</div>
</div>
推荐阅读
- php - 在 php 应用程序中使用 sleep()?
- java - 在弹性搜索中使用通配符“like”检索文档
- c# - Asp.net 核心样板 Angular 项目无法在任何浏览器中使用 VS 2017 调试 Typescript
- linux - 如何使用 GCP 负载平衡器将 HTTP 重定向到 HTTPS
- selenium - 在云端执行测试后返回结语
- scala - 为一个月的每一天生成纪元毫秒时间戳
- javascript - 如何在 HTML/JavaScript 中使用带有下拉列表和总和的 onchange 函数
- r - 在单独的数据框中根据选择标准创建大量统计模型
- java - 当我调用 @Listen onClick 时,ZK 框架有线文本框返回 NullPointerException
- javascript - 如何将两个依赖的 GraphQL 查询与“compose”结合起来?