如何正确定位div

我有3个div，main，right和left。主div包含右侧和左侧div，我想并排排列右侧和左侧div。我在这里阅读了几篇文章，但一直未能获得理想的结果。如何正确定位div

https://jsbin.com/lagikaxiwe/edit?html,css,output

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div#main-content { 
 
    background-color: bisque; 
 
    height: 100%; 
 
} 
 

 
div#right-content { 
 
    position: relative; 
 
    width: 35%; 
 
    height: 100%; 
 
    background-color: #ffffff; 
 
} 
 

 
div#left-content { 
 
    position: absolute; 
 
    width: calc(100% - 35%); 
 
    height: 100%; 
 
    margin: 0px 0px 0px 666px; 
 
    background-color: #00aeef; 
 
}

<div id="main-content"> 
 
    <div id="right-content"> 
 
    </div> 
 
    <div id="left-content"> 
 
    </div> 
 
</div>

来源

2017-09-15 Maddy

绝对定位是布局网页的一种非常糟糕的方法。它非常不灵活，并且有更好更快的响应选项。查看[** LearnLayout.com **]（http://learnlayout.com/） –

@Paulie_D，感谢您的链接。仍在学习如此坚持旧思想的CSS。 – Maddy

我没有把代码放在代码片段中，因为它没有显示整个事情。 – Maddy

最简单的方法现在在容器上使用display: flex。看看我的片段设置 - 我删除了很多其他的设置，这是没有必要...

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 

 
div#main-content { 
 
    background-color: bisque; 
 
    height: 100%; 
 
    display: flex; 
 
} 
 

 
div#right-content { 
 
    width: 35%; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
div#left-content { 
 
    width: 65%; 
 
    height: 100%; 
 
    background-color: #00aeef; 
 
}

<div id="main-content"> 
 
    <div id="right-content"> 
 
    </div> 
 
    <div id="left-content"> 
 
    </div> 
 
</div>

来源

2017-09-15 16:07:51 Johannes

是与Flex兼容的？我必须确保它适用于所有浏览器。 – Maddy

取决于版本 - 从11开始，是的。请参阅http://www.caniuse.com/#search=flexbox – Johannes

html, 
body { 
    margin: 0; 
    padding: 0; 
} 

div#main-content { 
     background-color: bisque; 
     height: 100%; 
     width: 100%; 
} 

div#right-content { 
    float: left; 
    width: 35%; 
    height: 100%; 
    background-color: #ffffff; 
} 

div#left-content { 
    width: calc(100% - 35%); 
    height: 100%; 
    background-color: #00aeef; 
    float: left; 
}

来源

2017-09-15 16:01:07 Sayan

我会亲自使用display:inline-block对齐左右divs 并排并添加必要的宽度以将父宽度的100％相加。请务必在父项上使用font-size:0以消除左侧和右侧隔栏之间的空白，以便它们彼此正确对齐。

请务必为您的左右内容分配字号，以便您的内容真正显示！

此方法在很大程度上向后兼容所有浏览器。

div#main-content{ 
    font-size:0; 
} 

div#left-content{ 
    display:inline-block; 
    vertical-align:top; 
    width:65%; 
} 

div#right-content{ 
    display:inline-block; 
    vertical-align:top; 
    width:35%; 
}

来源

2017-09-15 16:08:59

如何正确定位div

回答

相关问题