css - 用css放置元素?
问题描述
我想将图像向左浮动,在图像旁边,向左浮动的另一个将是Authro,Date和Category,然后,其他元素将浮动在右侧......就像这样...... https://i .imgur.com/tcKwalP.png
这就是我到目前为止所拥有的...... https://jsfiddle.net/fbn9r3y4/
这是html...
<div class="entry-meta">
<span class="entry-image">
<a class="entry-image-a" href="">
<img src="image.jpg" height="48" width="48">
</a>
</span>
<span class="entry-author">
<a href="" title="" rel="author">Ester</a>
</span>
<span class="entry-date">September 3, 2019</span>
<span class="entry-category-single">
<a href="">Music</a>
</span>
<span class="meta-right">
<span class="entry-views"><span class="view-count">998</span> Views</span>
<span class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em>Likes</em></span>
</a>
<span class="sl-loader"></span>
</span>
</span>
</span>
</div>
这是css...
.entry-meta {
font-family: Arial, sans-serif;
display: block;
align-items: center;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
}
.entry-image {
display: block;
float: left;
}
.entry-author {
display: block;
float: left;
width: 200px;
}
.entry-date {
display: block;
float: left;
width: 200px;
clear: left;
}
.entry-category-single {
display: block;
float: left;
width: 200px;
clear: left;
}
.meta-right {
margin: 0 10px 0 0;
margin-left: auto;
order: 2;
float: right;
}
.entry-like {
min-width: 32px;
line-height: 1;
float: right;
clear: right;
}
.entry-views {
min-width: 32px;
line-height: 1;
float: right;
clear: right;
}
解决方案
我稍微更改了您的标记,并meta-left
在左侧的内容周围添加了一个环绕。我还简化了你的 CSS。有几个 CSS 属性无效或不必要。
.entry-meta {
font-family: Arial, sans-serif;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
}
.entry-meta::after {
content: '';
clear: both;
display: block;
}
.meta-left {
float: left;
}
.meta-right {
float: right;
margin: 0 10px 0 0;
}
.entry-image {
float: left;
}
.meta-info {
float: left;
margin-left: 10px;
}
.entry-like {
min-width: 32px;
line-height: 1;
}
.entry-views {
min-width: 32px;
line-height: 1;
}
<div class="entry-meta">
<div class="meta-left">
<div class="entry-image">
<a class="entry-image-a" href="">
<img src="https://via.placeholder.com/48" height="48" width="48">
</a>
</div>
<div class="meta-info">
<div class="entry-author">
<a href="#" title="" rel="author">Ester</a>
</div>
<div class="entry-date">September 3, 2019</div>
<div class="entry-category-single">
<a href="#">Music</a>
</div>
</div>
</div>
<div class="meta-right">
<div class="entry-views"><span class="view-count">998</span> Views</div>
<div class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em> Likes</em></span>
</a>
<span class="sl-loader"></span>
</span>
</div>
</div>
</div>
这是一个使用display: flex
更简单的版本。相同的标记。
.entry-meta {
font-family: Arial, sans-serif;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.meta-left {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.meta-info {
margin-left: 10px;
}
<div class="entry-meta">
<div class="meta-left">
<div class="entry-image">
<a class="entry-image-a" href="">
<img src="https://via.placeholder.com/48" height="48" width="48">
</a>
</div>
<div class="meta-info">
<div class="entry-author">
<a href="#" title="" rel="author">Ester</a>
</div>
<div class="entry-date">September 3, 2019</div>
<div class="entry-category-single">
<a href="#">Music</a>
</div>
</div>
</div>
<div class="meta-right">
<div class="entry-views"><span class="view-count">998</span> Views</div>
<div class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em> Likes</em></span>
</a>
<span class="sl-loader"></span>
</span>
</div>
</div>
</div>
推荐阅读
- bash - 如何保存到var,输出中只有一个
- java - 枚举转换名称响应
- javascript - mapbox gl js上的自定义滑块缩放栏?
- dictionary - 在流中使用 map 时遇到 Dart 问题
- python - 类型“类型”的参数不可迭代。如何?
- tfs - 如何在 TFS 2017 上运行项目备份
- postgresql - Quarkus:数据源'
':致命:主机没有 pg_hba.conf 条目 - swift - 外部模型对象的 SwiftUI 数据流和 UI 更新,其值发生变化但 id 相同
- arrays - FreeMarker 模板语言 (FTL):拆分多值 XML 字段元数据以对各自的值进行分组
- spring - 在springMVC中反序列化嵌套的Kotlin对象