相关疑难解决方法(0)

鉴于此HTML和CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

结果,SPAN元件之间将存在4像素宽的空间.

演示: http ://jsfiddle.net/dGHFV/

我理解为什么会发生这种情况,而且我也知道我可以通过删除HTML源代码中SPAN元素之间的空白来摆脱那个空间,如下所示:

<p>
    <span> Foo </span><span> Bar </span>
</p>

但是,我希望CSS解决方案不要求HTML源代码被篡改.

我知道如何用JavaScript解决这个问题 - 通过从容器元素(段落)中删除文本节点,如下所示:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示: http ://jsfiddle.net/dGHFV/1/

但是这个问题可以单独用CSS解决吗？

在做CSS设计的过程中,我一直想知道一些事情.

css宽度中的小数位是否受到尊重？或者他们四舍五入？

.percentage
{
    width: 49.5%;
}

要么

.pixel
{
    width: 122.5px;
}

我有一个很大的内部<div>有三个小<div>内联.它们各有33%的宽度,但这会导致一些对齐问题,因为3*33%!= 100%.在这样的CSS中表现完美第三的最好方法是什么？也许只有33.33%？

当浏览器被赋予非整数值的元素的宽度和高度时,它们如何处理它们？

特别是,

• 在什么阶段非整数值被舍入？它们是否舍入到最接近的整数,或截断它们？
• 当容器的子项具有非整数维度时,是否会出现子项长度或高度的总和不等于父元素的内部宽度/高度的情况？
• 提供的非整数维度是否与基于百分比的维度的非整数结果的处理方式不同？
• 填充和边距的非整数值怎么样？
• 编辑: 是执行此舍入的浏览器,还是操作系统？如果它是操作系统,是否会创建浏览器"认为"项目大于其绘制区域的条件,这是否会导致父容器大小调整的问题？

我想知道如何在div中创建多个列.这是一个页脚,我想要一个站点地图,社交媒体链接等.

我打算使用,<multicol>但后来我读到它已被弃用,所以它让我不再使用它.

基本上我有80%宽的DIV,我需要三列.优选地每个都具有边际.

CSS:

 div.bottom
        {
            height: 200px;
            width: 80%;
            margin-left: auto;
            margin-right: auto;
            margin-top: none;
            margin-bottom: none;
            border-top: 4px solid #00ccff;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            background-color: #575757;
        }

我现在只需要HTML.感谢您的时间.

我是CSS的新手,我不知道如何解决这个问题.当我尝试并将我的三个图像彼此相邻而没有填充或边距和33%的宽度时,我得到了额外的空间.我认为它与图像有关,不想正确调整,但由于我不使用它们作为背景图像,我不知道如何使用cover属性.图片的HTML:

        
            /* Body styles */
              body {
              background-color: white;
              font-family: ;
              margin: 0px auto;
              width: 100%;
              min-width: 1000px;
              max-width: 1400px;}
        
             /* Image styles */
              #box img {
              padding: 0px;
              float: left;
              width: 33%; }
        
Run Code Online (Sandbox Code Playgroud)
            <div id="box">
                    <img src="box_social_bg.jpg" alt="Social link box" />
                    <img src="box_rewards_bg.jpg" alt="Rewards link box" />
                    <img src="box_franchise_bg.jpg" alt="Franchise link box" />
            </div>
        
        
Run Code Online (Sandbox Code Playgroud) 
        

          html
        
          css
        
        

          

            
            
               bri*_*gle
            
          
          

            
               2017 07-06 
            
          
        
      
      

        

          
          
0
推荐指数
          
1
解决办法
          
87
查看次数