使用Inline-Block的CSS定位70-30 [英] CSS Positioning 70-30 with Inline-Block

问题描述

我定位主栏和侧栏与 70-30 比率，如下所示： JSFIDDLE

  .main-bar，.side-bar {position：relative; margin：0; padding：0;轮廓：0; display：inline-block; border：none;背景：#CCC} .main-bar {width：70％}。side-bar {width：30％} / * Works.side-bar {width：29％} * /  pre> 
 < div class =main-bar>我是国王！< / div>< div class =side-bar>我不少！< / div>  
 

使用 70-29 比率。

解决方案

您必须在div之间移除白色空间并且不允许内嵌块正确对齐。

  .main-bar，.side-bar {position ：相对; margin：0; padding：0;轮廓：0; display：inline-block; border：none; background：#CCC;}。main-bar {width：70％;}。side-bar {width：30％;}  

 < div class =main-bar>我是国王！< / div><！---->< div class =side-bar>我不少！< / div>  

a href =http://css-tricks.com/fighting-the-space-between-inline-block-elements/ =nofollow>抵消内联块元素之间的空间

I am positioning main-bar and side-bar with 70-30 ratio as under: JSFIDDLE

.main-bar, .side-bar{
	position: relative;
	margin:0; padding: 0;
	outline: 0;
	display: inline-block;
	border:none;
    background:#CCC
}
.main-bar{width: 70%}
.side-bar{width: 30%}

/* This Works

.side-bar{width: 29%}

*/

<div class="main-bar">
    I am the King!
</div>

<div class="side-bar">
   I am not less!
</div>

Interestingly, it works with 70-29 ratio. Did I miss something?

解决方案

You have to remove white space between divs as it also take place and doesn't let inline-blocks align properly.

.main-bar, .side-bar {
    position: relative;
    margin: 0;
    padding: 0;
    outline: 0;
    display: inline-block;
    border: none;
    background: #CCC;
}
.main-bar {
    width: 70%;
}
.side-bar {
    width: 30%;
}

<div class="main-bar">
    I am the King!
</div><!--

--><div class="side-bar">
   I am not less!
</div>

Reference: Fighting the Space Between Inline Block Elements

这篇关于使用Inline-Block的CSS定位70-30的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！