css如何让div横向排列

html-css017

css如何让div横向排列,第1张

可以使用弹性布局，display: flex 就可以让div横排，默认布局轴方向就是横向，justify-content: space-between可以是div平均分布在水平轴上。

方法多多，看你怎么用，css 就不写了，光看 dl 你应该知道如何做了：

-----------------------------------------------------------------------

<h3>站内通知</h3>

<dl>

<dt>关于离退休人员领取中秋月饼的通知 2012-09-01<dt>

<dd>本公司离退休人员可凭退休证于2012年10月1日前到工会张主任处领取月饼一盒，请相互通知转告!</dd>

<dt>公司上市在职职工购买原始股优惠方案出台<dt>

<dd>公司在职人员(不含退休及非正式工)每人可以市场发行价格的20%认购公司股票，每人最多认购10万股；</dd>

</dl>

--------------------------------------------

你可以把下面 3 个或更多 dl 加上 float 属性浮动成一排横向的，并给 dl 上加相对定位属性，再把每个 dl 里面的 dt、dd 用绝对定位做成显示为 dd 图片在上，dt 图片名字在下面的形式定位在 dl 里面合适的位置，然后用 js 做横向循环无缝滚动图片代码。

<dl>

<dt>图片1</dt>

<dd><img src="pic.jpg" alt="你的图片" /></dd>

</dl>

<dl>

<dt>图片2</dt>

<dd><img src="pic.jpg" alt="你的图片" /></dd>

</dl>

<dl>

<dt>图片3</dt>

<dd><img src="pic.jpg" alt="你的图片" /></dd>

</dl>