使用CSS的div对齐

我想把div'widget block'靠近div'half left'，但由于某种原因，'half left'div正在走高。使用CSS的div对齐

我的代码：

<div id="featured" class="grid col-940"> 
    <div id="featured-content" class="grid col-460">half left</div> 
    <div id="featured-image" class="grid col-460 fit"><p>half right</p></div> 
    <div id="widgets" class="grid-right col-460 ltr-fit">widget block</div> 
</div>

我怎么能推格“窗口小部件块”，迈向“半左”和覆盖两者之间的差距股利。我无法更改html结构，因为我需要坚持下去。

全屏 - http://jsfiddle.net/squidraj/7QE52/3/embedded/result/

小提琴 - http://jsfiddle.net/squidraj/7QE52/3/

感谢。

来源

2014-02-09 Prithviraj Mitra

你甚至在问之前在CSS上进行了尝试吗？我没有看到CSS中的“widgets”的任何引用... –

我试着创建#widgets，并把一个浮点值留在那里，但没有奏效。 –

至少将它添加到你的小提琴，所以它看起来像你至少*试过*东西 –

这是你想要的代码（我认为）：

PS：你要放的位置：相对于父元素的子元素的位置。另外，如果你想把它从流中取出，你必须将孩子定位为绝对的。然后，您想要将顶部向下移动一行。我根本没有改变你的HTML代码，只有你的CSS。

#featured { 
     padding-bottom: 0; 
     background-color:#dfdfdf; 
     position:relative; 
    } 
    #featured-content { 
     background-color:#1A3F70; 
    } 
    .col-940 { 
     width: 100%; 
    } 
    .grid { 
     float: left; 
     padding-top: 0; 
    } 
    .col-460 { 
     margin-right: 0; 
     width: 49.936%; 
    } 
    #featured-image { 
     margin: 0px 0 0; 
     background-color:#FC9B32; 
    } 
    #featured-image p { 
     padding:0; 
     margin:0px 0px 60px 0px 
    } 

    .fit { 
     margin-left: 0 !important; 
     margin-right: 0 !important; 
    } 
    #widgets { 
     float:left; 
     top: 20px; 
     position:absolute; 
    }

来源

2014-02-09 02:46:07

谢谢Stefan。你的解决方案确实帮了很大忙。 –

使用CSS的div对齐

回答

相关问题