论坛 › Web开发 › 怎样让页面结构不随窗口大小而改变

sunbocheng 发表于 2017-10-7 16:30:45

怎样让页面结构不随窗口大小而改变

像京东，新浪这类网站你缩小窗口，顶多是看不到了，但是我这里一动窗口结构就变了，是为什么呢？{:10_245:}{:10_245:}{:10_245:}<div class="con6">
    <p>
    </p>
</div>
<div class="con6">
    <p>
    </p>
</div>
<div class="con6">
    <p>
    </p>
</div>

.con6{
            width: 340px;
            height: 180px;
            border-radius: 1em ;
            background: blue;
            display: inline-block;
            margin: 0 20px;
      }

不二如是 发表于 2017-10-8 10:58:50

设置display为“display-blcok”，意味着：
        简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

说的再通俗些：
        设置完display-block的元素，即可以拥有块级元素（浮动，可调整高度）和行内元素（可调整左右边距，多个元素同一行显示）的特点

效果：




需求：缩小窗口后页面结构不变

div本身是块级元素（每个元素独占一行），取消display设置：
   .con6{
            width: 340px;
            height: 180px;
            border-radius: 1em ;
            background: blue;
            margin: 0 10px;
      }


等同于设置：
display: block;

sunbocheng 发表于 2017-10-9 21:56:00

{:5_106:}

查看完整版本: 怎样让页面结构不随窗口大小而改变