`

CSS - dispaly:inline-block

    博客分类：
  • css
cssdisplayinline-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>



















-
  • 大小: 18.5 KB
分享到：
| 《琵琶行·並序》
评论
发表评论

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

相关推荐

    有关display:inline-block在FF出现空白的解决方案

    在网页布局设计中，`display:inline-block` 是一个非常常用且强大的CSS属性，它允许元素在保持块级元素特性的同时，像内联元素一样并排显示。然而，在不同浏览器之间，尤其是在Firefox（FF）上，可能会遇到一些显示...

    CSS属性display:inline-block用法深入理解

    总的来说，`display:inline-block`是一种强大的CSS属性，能够帮助开发者创建更加灵活和复杂的网页布局。尽管存在浏览器兼容性挑战，但通过合理的CSS hack和技巧，我们可以克服这些问题，实现跨浏览器的`inline-block...

    display:inline-block的实际应用

    `display:inline-block` 是 `display` 的一个值，它结合了块级元素（block-level element）和内联元素（inline element）的一些特性，为网页布局提供了更灵活的选择。在本篇文章中，我们将深入探讨 `display:inline-...

    display:inline、block、inline-block的区别（转的）

    本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别，帮助你更好地理解它们在实际开发中的应用。 首先，我们来看`display:inline`。这种模式使得元素...

    display:inline-block的原理分析

    `display:inline-block` 是 CSS 中的一个重要属性，用于控制元素的布局方式。这个属性结合了 `display:inline` 和 `display:block` 的特性，使得元素既能像内联元素一样在一行内排列，又能像块级元素一样拥有宽度、...

    css解决display:inline-block;产生的缝隙（间隙）的方法

    在CSS布局中，`display: inline-block` 是一个常用的属性，它允许元素以行内元素的方式排列，同时具有块级元素的部分特性，如指定宽度和高度。然而，使用`display: inline-block` 时，元素之间往往会出现一些...

    关于css display: inline block inline-block的区别分析

    `display: inline`、`display: block` 和 `display: inline-block` 是三种常见的值，它们各自具有不同的行为和用途。 1. **display: inline** - `display: inline` 使得元素以行内元素的方式呈现，这意味着它们会...

    display:inline-block的使用示例

    在网页布局设计中，`display:inline-block` 是一个非常实用的CSS属性，它允许元素以行内元素的方式显示，但同时保留着块级元素的特性，如设置宽度、高度以及垂直对齐等。这个属性在处理多列布局，尤其是需要在有限的...

    无js实现text-overflow: ellipsis; 完美支持Firefox

    display: inline-block; /* 使内部元素按行内元素处理 */ } ``` 3. **调整伪元素位置**: 由于我们已经设置了内部元素的宽度，所以需要根据这个宽度来调整省略号的位置，使其正好位于文本末尾。 ```css .container...

    CSS之display引用运用

    通过本文的介绍，我们可以看到`display:inline-block`是一个非常强大且灵活的CSS属性，它可以帮助我们解决许多网页布局中的难题。然而，需要注意的是，在使用时还需考虑浏览器的兼容性问题，并采取相应的解决措施。...

    使用font-size：0px 来制作跨浏览器的inline-block css属性

    现代浏览器的最新版都支持inline-block，只有该死的ie6、7不支持inline-block，但ie6、7可以通过 display：inline；zoom：1；来模拟。 下面是inline-block兼容的代码： 复制代码代码如下: display:inline-block;*...

    div-css-漂亮的导航条

    &lt;style type="text/css"&gt; body { margin:0; padding:0; font: bold 11px/1.5em Verdana; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px...

    inline-block 前世今生1

    display:inline-block 属性是CSS布局中的一个重要概念，它允许元素具有内联元素的特性（如排列在同一行内），同时又能像块级元素那样设置宽度、高度和垂直对齐。这个属性在前端开发中被广泛应用，尤其是用于创建响应...

    css-mquery-packer:简单的媒体打包程序，通过PostCSS将相同CSS媒体查询规则合并为一个

    display : inline-block; } @media screen and ( max-width : 660 px ) { . btn { display : block; width : 100 % ; } } . wrapper { max-width : 1160 px ; } @media screen and ( max-width : 660 px ) { ...

    深入display:inline-block

    `display:inline-block`是CSS布局中的一个重要属性，用于将元素表现得既像内联元素那样在一行内排列，又能像块级元素那样控制其内部内容的布局。这种特性使得`inline-block`在网页布局中非常实用，特别是在创建响应...

Magicbox
Global site tag (gtag.js) - Google Analytics