CSS - dispaly:inline-block -

Lixh1986

浏览: 1111038 次

最近访客更多访客>>

Z865785437029

akingde

ningzong

蕃薯耀

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS - dispaly:inline-block

博客分类：

css display inline-block

如果不是块级（ block ）类型的元素，当设置 width, height, margin 属性时不起作用。因为 display 为 inline 时，没有这些属性。

但是，如果 display 设置为 : inline-block 的元素，即保持了 inline 的自调节位置，又同时具备了 block 的 width, height, margin 属性。

========================================================================

CSS Layout - inline-block

The inline-block Value

It has been possible for a long time to create a grid of boxes that fills the browser width and wraps nicely (when the browser is resized), by using the float property.

However, the inline-block value of the display property makes this even easier.

inline-block elements are like inline elements but they can have a width and a height.

<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
    display: inline-block;   
    margin: 10px;
    border: 3px solid #73AD21; 
    
    height:50px;
}
</style>
</head>
<body>

<h2>The New Way - using inline-block</h2>

<!-- same effect with :
     <span> element. -->
<span class="floating-box">Floating box</span>Hello, World!
<span class="floating-box">Floating box</span>Hello, World!
<span class="floating-box">Floating box</span>Hello, World!
<span class="floating-box">Floating box</span> Hello, World!

<!-- use <div> element -->
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>


</body>
</html>

查看图片附件

分享到：

长期面对电脑如何避免颈椎疼 | 《琵琶行·並序》

2016-04-22 17:58
浏览 842
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS - dispaly:inline-block

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS - dispaly:inline-block

评论

发表评论

相关推荐

Flex之 justify-content 和 flex-direction 的应用

CSS之页面元素飞入效果

CSS之垂直居中

Sass之&引用父选择器

HTML5之canvas之粒子效果

CSS之导航栏设计之 ul 之 li 标签排成一行

HTML5/CSS3鼠标滑过图片滤镜动画效果

CSS之提示框实现

Responsive Web Design（自响应式网页设计）

css 之 linear-gradient 之 进度条（progress bar）

在 css 中使用 @font-face

jQuery之mouseover,mouseover,mouseout,mouseleave

css:flex布局

网站页面配色

BootstrapCSS之Select

CSS样式之带边框的 Anchor（超链接）

bootstrap css之响应式导航栏

CSS之 white-space : pre

CSS - li 元素显示在一行____ a 元素没有下横线

CSS - table 圆角 border radius

最近访客更多访客>>

css 之 linear-gradient 之进度条（progress bar）