实现两端对齐布局_text-align:justify

时间: 2019-04-10阅读: 406标签: 布局

css:

  .box {
            width: 256px;
            height: 256px;
            border-bottom: 1px dashed #ccc;
            text-align: justify;
            font-size: 0;
            /*text-align:justify 要想有两端对齐的效果,需
要满足两点:一是有分隔点,如空格;二是要超过一行*/
        }
        /*如何要兼容 ie7就不要用伪元素,用dom元素代替*/
      /*  .box:before {
            content: "";
            display: inline-block;
            height: 100%;
            
        }*/
        .box:after {
            content: "";
            display: inline-block;
            width: 100%;
            /*这个为满足text-align:justify要超过一行的要求*/
        }
        .bar {
            display: inline-block;
            width: 20px; height: 100px;
            background: red;
        }

html:

<!--第一个i标签前面千万不要有空格或者回车,空格和回车就是占用空白的位置,如果采用before底部对齐时会出现空白-->
<div id="box" class="box"><i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
</div>


但是当里面的i个数太多,就会换行,就导致换行的那几个个i就会在新的一行左右对齐分布,解决的方法是在最后一个i后面补上几个i,这个个数加上换行的i的个数要等于第一行i的个数,见代码

css

.bar {
        display: inline-block;
        width: 20%;
        height: 100px;
        background: red;
        margin-right: 10px;
}
.place{
        display: inline-block;
        width: 20%;
        vertical-align: bottom;
        margin-right: 10px; 
}

html ,第一行有4个i,第二行有三个,所以只需要补一个

<div id="box" class="box">
	<i class="bar"></i>
	<i class="bar"></i>
	<i class="bar"></i>
	<i class="bar"></i>
	<i class="bar"></i>
	<i class="bar"></i>
	<i class="bar"></i>
	<span class="place"></span>
</div>



吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/2796

弹性(Flex)布局的使用

最近我参与实施的两个项目中,一个页面交互复杂,而另一个相对传统,两个项目相比之下凸显出了页面布局样式的时间占比不可忽视,使用了弹性布局代码量精简了不少

css3 弹性盒布局的使用-Flex

css3 的Flex弹性盒的布局是一个用于页面布局的全新CSS3模块功能。它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩容器

CSS实现自适应两栏布局方法

浮动+margin第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度。 第二种:左边绝对定位(脱离文档流,不占位置)

网站设计和布局的重要性和过程

网站的设计是吸引客户的非常重要的因素。如今,互联网上存在着很多竞争,每个人都可以点击其客户,但是只有少数人能吸引他们。这通常是由于网站给人的第一印象。

Web布局:display属性

经过 CSS盒模型 和视觉格式化模型两个章节中的学习,我们有了一个清晰的概念。即 在CSS中插何一个元素都是一个盒子,甚至是文本节点也是一个盒子(匿名盒子);都有自己的视觉格式化(不同的盒子)

IOS 浏览器页面布局错位(如:点不到)的分析与解决

IOS 浏览器软键盘的拉起与收缩、微信 IOS 浏览器底部导航条的显示与隐藏,很容易导致页面布局错位(相对窗体的绝对定位元素):明明按钮在这里,却要在上面一点儿点击屏幕才能点到它

移动端布局方案,简单高效,完美适配各种机型

rem布局:使用rem作为元素大小的单位,rem=fount-size,根据不同的屏幕宽度设置不同的fount-size值,这样元素也会跟着屏幕变大或变小,第二步:使用postcss-px2rem-exclude将px转换为rem

flex的各种布局

Flex是Flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。任何一个容器都可以指定为Flex布局。

响应式布局

Responsive web page响应式布局/自适应网页,可以根据浏览器设备不同(pc,pad,phone)而自动的更改布局,图片,文字效果,不会影响用户体验

css如何实现n宫格布局?

现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在.带边框, 先解释一个小技巧, 如何实现正方形, 保证看一遍就会, 结论就是:padding的值如果是百分比

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全