CSS 图片和文字如何实现并排?

html-css014

CSS 图片和文字如何实现并排?,第1张

无论你右边文字有多少,始终都会在图片右边,不会再跑到图片下边了。

代码如下,好好研究:

<style type="text/css">

.item .pic { float:leftmargin-right:10pxwidth:100pxheight:100px}

.item .content {float:leftwidth:500px}

</style>

<div class="item">

<div class="pic"><img src="a.jpg"></div>

<div class="content">文字部分</div>

</div>由于这个功能都要使用到浮动float,就需要对左右两边的模块都要定义款度,不然的话,默认的都是100%,是填充整个外部容器,是无论如何都不能左右显示了。

最常用的一种方法:就是浮动,浮动之后会自动往右挤,挤不下就到第二行了。  

     <ul>

           <li>第一张图片</li>

           <li>第二张图片</li>

           <li>第三张图片</li>

           <li>第四张图片</li>

           <li>第五张图片</li>

           <li>第六张图片</li>

           <li>第七张图片</li>

           <li>第八张图片</li>

    </ul>

<style> ul{width:800px height:200px} li{width:195pxheight:98pxmargin:1px auto float:leftlist-style-type:none}

</style>

1.page.html文件里写ionic提供的控件,比如:ion-header,ion-content, ion-title,ion-toobar,经管如此,有时候满足不了项目的界面,我们需要结合HTML的基本命令来完成设计,比如:div,p, img,a,等。

2.scss使用经验:每个页面都有自己的scss文件,我在使用时,发现几个页面的css定义会影响,就是页面2可以用页面1的css定义造成干扰的现象,后来发现,每个scss文件里有个页面定义,我们只要把当前页面的css定义放在这个页面定义就行,实现了css分离。()本人刚学习网页编程,一切都在探索中)。示例如下:

age-page3 {

.page {

display: flex

align-items: center

text-align: center

margin: 0 auto

height: 100%

ackground-color: #abaaaa

adding-top: 5px

adding-bottom: 5px

// margin-top: 2px

这个page属性就放在了page-page3的大括号里面,保证了这个css定义只影响当前页面。