两栏自适应布局--溢出省略

1. 内容撑开宽度的.auto-content: 可以是内联元素，也可以是块状元素

.auto-content {
    float: right;
    overflow: hidden;
}

2. 宽度是余下所有的.auto-rest: 必须将内联元素装换成块状元素

.auto-rest {
    overflow: hidden;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

HTML代码如下：

<span class="auto-content">span<span>
<a href="#" class="auto-rest">alink</a>

时间： 2024-10-13 17:34:07

两栏自适应布局--溢出省略的相关文章

两栏自适应布局

<!DOCTYPE > <html> <head> <title></title> <meta name="name" content="content"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta http-equiv="

.main,.sitebar{ height: 300px; font: bolder 20px/300px "微软雅黑"; color: black; text-align: center; } .main{ width: 100%; float: left; } .main .content{ margin-left: 200px; background: red; } .sitebar{ width: 200px; float: left; margin-left: -100%;

【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4588 一.开篇之言要说web上实现两栏自适应布局的方法,一双手都数不过来.不知大家有没有细想过,为什么这些方法可以实现自适应布局呢? 本文就将深入探讨下流体特性和BFC特性下的两栏自适应布局,还是

两栏三栏自适应布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html,body{width:100%;height:100%;overflow:hidden;} html{_height:auto;_padd

圣杯双飞翼布局多栏自适应布局BFC

七种实现左侧固定,右侧自适应两栏布局的方法圣杯布局双飞翼布局圣杯布局和双飞翼布局 CSS深入理解流体特性和BFC特性下多栏自适应布局块状元素的流体特性. 图片宽度一直width:100%,结果随着margin, padding, border的出现,其可用宽度自动跟着减小,形成了自适应效果.就像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间(box-sizing:border box;感觉) 然而,利用块状元素流体特性实现的自适应

多栏自适应布局

一.两栏自适应,左右栏高度均200px, 左栏宽度自适应,右栏宽度200px  <div class="right"></div> <div class="left"></div> * { margin: 0; padding: 0; } /*方案一*/ .right { width: 200px; height: 200px; background-color: orange;

css 多栏自适应布局

在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师",我们应该需求一些优雅点的方法.先说说两栏布局,上例子: <div class='container' > <div class='div1' >1</div> <div class='div2' >2</div> </div> 如图,假如

三栏自适应布局

常用的有三种方式: 1.绝对定位法(最易理解) 左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离.于是实现了三栏自适应布局. 1 <html> 2 3 <head> 4 5 <title>三栏自适应布局</title> 6 7 <style type="text/css"> 8 9 html,body{ 10 11 margin:0; 12 13 height:100%; 14 15 }

文字环绕和两栏自适应以及区域滚动插件iscroll.js

一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文