DIVs安排 - HTML CSS

本文介绍了DIVs安排 - HTML CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何构建不使用js？

提前感谢！

#div3 {
    display: inline-block;
}
#div1 {
    min-width: 150px;
    float: left;
}

#div2 {
    max-width: 100%;
    float: left;
}

- 如何将第二个div适合内容？第一个不得超过150像素

http://jsfiddle.net/XCDsu/4/ - how can i fit the second div to content ? The first one has to be 150px not percent

推荐答案

您可以使用圣杯技术：

You could use the holy grail technique:http://alistapart.com/article/holygrail

#div3 {
    display: block;
    background: blue;
    padding-left: 150px;
}

#div1 {
    width: 150px;
    float: left;
    margin-left: -150px;
}

#div2 {
    width: 100%;
    float: left;
}

这会在＃div3的左边创建一个150px宽的填充，但它拉#del1到它与负边距。

What this does is create a 150px wide padding on the left of #div3, but it pulls #div1 into it with the negative margin.

这样，＃div2使用的100％实际上是（100％ - 150px）＃div3

This way the "100%" that #div2 uses is actually (100% - 150px) of #div3

这篇关于DIVs安排 - HTML CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！