Html x个元素对一个元素
这件事现在让我抓狂。我想将四个较小的元素与一个较大的元素对齐Html x个元素对一个元素,html,css,Html,Css,这件事现在让我抓狂。我想将四个较小的元素与一个较大的元素对齐 +-----------------+-------------------------+ + + | | title | | | 30px | |-------------------------+ | 1 + | | |
+-----------------+-------------------------+ + +
| | title | | | 30px
| |-------------------------+ | 1 +
| | | | 2 |
| thumb | text | | 0 | 60px
| | | | p |
| |-------------------------+ | x +
| | views | flag (space) | | | 30px
+-----------------+-------------------------+ + +
我尝试了float:left
和float:right
以及clear:right
的所有可以想象的组合,使用span
以及div{display:inline}
。它只是不想表现得像我期望的那样
我知道这可以通过display:table
实现,但我很好奇为什么float:left
和clear:right
的组合不能像我的情况那样工作
这是我的代码(很抱歉弄混了style.css,但这正是经过数小时令人筋疲力尽的工作后现在的样子):
row.php
<div class="wide media-library">
<div class="inner">
<!-- (...) -->
<?php while($row = $result->fetch_assoc()): ?>
<div class="row" data-id="<?php echo $row['video_id']; ?>" data-resource-id="<?php echo $row['video_resource_id']; ?>" id="<?php echo $row['video_id']; ?>">
<div class="thumb" style="background-image: url(/<?php echo $row['slideshare_thumb_url']; ?>)"></div>
<div class="title"><?php echo $row['name_en']; ?></div>
<div class="text"><?php echo $row['description']; ?></div>
<div class="views"><?php echo $row['no_of_views']; ?></div>
<div class="flag" style="background-image: url(/<?php echo $row['flag_image_path']; ?>)"></div>
</div>
<?php endwhile; ?>
<!-- (...) -->
</div>
</div>
在这里,只需移除右侧元素上的浮动: 工作区: 或代码片段:
.wide.media-library{
颜色:#000;
}
.wide.media-library.inner{
显示:块;
字体大小:14px;
高度:自动;
位置:相对位置;
}
.wide.media-library.row div{
显示:块;
}
.wide.media-library.row.thumb{
背景:#CCC;
浮动:左;
高度:120px;
宽度:68px;
}
.wide.media-library.row.title{
高度:30px;
}
.wide.media-library.row.text{
高度:70像素;
}
.wide.media-library.row.views{
高度:20px;
显示:内联;
}
.wide.media-library.row.views:之后{
内容:“|”;
}
.wide.media-library.row.flag{
背景:#CCC;
高度:20px;
宽度:16px;
显示:内联;
}
.行>分区{
右边距:2px;
}
只是一个标题。。。
... 只有一个描述。
1337视图
(国旗)
为什么不在右边的元素周围加上一个“父”包装,然后这些元素可以浮动或以其他方式设置在右边?带有类的HTML元素“media”和“media”在哪里?它们在你的CSS中,但不在你的HTML中。@putvande只是我在修改问题的样式以使其更易于理解时犯的一个错误。将其更改为实际状态,因为它已经在JSFIDLE中了。只想对您的回答说声谢谢!现在,我真的很累,正在寻找食物,但我肯定会在周末再去看看。
.wide.media-library {
color: #000;
}
.wide.media-library .inner {
display: block;
font-size: 14px;
height: auto;
position: relative;
}
.wide.media-library .header {
margin-bottom: 45px;
}
.wide.media-library .header h2 {
font-size: 26px;
font-weight: normal;
margin-bottom: 20px;
margin-top: 20px;
text-align: left;
}
.wide.media-library .header p {
text-align: left;
font-size: 16px;
}
.wide.media-library .filter {
padding-bottom: 10px;
padding-top: 10px;
}
.wide.media-library .filter input {
background-color: rgb(200, 200, 200);
border: 0px;
border-radius: 12px;
font-size: 14px;
height: 27px;
padding: 0;
padding-left: 11px;
width: 290px;
}
.wide.media-library .filter select {
font-size: 14px;
height: 22px;
margin-left: 60px;
margin-top: 4px;
padding: 0px;
vertical-align: top;
width: 240px;
}
.wide.media-library .row div {
display: inline;
}
.wide.media-library .row .thumb {
background-size: 120px 68px;
float: left;
height: 120px;
width: 68px;
}
.wide.media-library .row .title {
float: right;
}
.wide.media-library .row .text {
float: right;
}
.wide.media-library .row .views {
float: right;
}
.wide.media-library .row .flag {
background-size: 16px 12px;
float: right;
height: 12px;
width: 16px;
}