我正在为我的视频制作网站,我正在设置类似于视频缩略图的图片。我希望每条“线”有2张图片。但这就是它的样子:
-----
| |
-----
-----
| |
-----
我画的每一个盒子都是一个带有图片和一些文字的盒子。
这是CSS:
#videoList{
width: 480px;
margin: 15px;
background: #DBDBDC;
float: left;
clear: both;
text-align: center;
text-indent: 20px;
}
#videoList2{
width: 480px;
margin: 15px;
background: #DBDBDC;
float: right;
clear: both;
text-align: center;
text-indent: 20px;
}
这是HTML:
<div id="videoList">
<p>
<a href="something.html">video title</a>
</p>
<img src="images/img.jpeg" />
</div>
<div id="videoList2">
<p>
<a href="something.html">video title</a>
</p>
<img src="images/img.jpeg" />
</div>
我能做些什么才能让两个盒子上线?
答案 0 :(得分:0)
试试这个: CSS&GT;&GT;&GT;
#videoList{
width: 480px;
margin: 15px;
background: #DBDBDC;
float: left;
text-align: center;
text-indent: 20px;
}
#videoList2{
width: 480px;
margin: 15px;
background: #DBDBDC;
float: left;
text-align: center;
text-indent: 20px;
}
#videoContainer{width: 1020px; height: 300px; background-color: pink}
`
这是HTML:
<div id="videoContainer">
<div id="videoList">
<p>
<a href="something.html">video title</a>
</p>
<img src="images/img.jpeg" />
</div>
<div id="videoList2">
<p>
<a href="something.html">video title</a>
</p>
<img src="images/img.jpeg" />
</div>
</div>
答案 1 :(得分:0)
这将有效,只要窗口足够大,两个盒子就可以放在同一条线上:
<div id="videoList">
<p>
<a href="something.html">video title</a>
</p>
<img src="images/img.jpeg" />
</div>
<div id="videoList">
<p>
<a href="something.html">video title</a>
</p>
<img src="images/img.jpeg" />
</div>
CSS:
#videoList{
display: block-inline;
width: 480px;
margin: 15px;
background: #DBDBDC;
float: left;
text-align: center;
text-indent: 20px;
}
我添加了“display:block-inline;”并删除了你的“清楚:两个;” “清楚:两者都是;”类似于“浮动”,但倾向于推动事物吼叫
显示:block-inline;与使文本行为相关,文本将显示在页面上而不是页面下方。