0

我正在尝试按正文宽度 100% 和一列宽度为 30% 和其他为 70% 来实现两列布局页面。但是第二列 [width: 70%] 不起作用。

HTML：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="offer-details">aaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div class="offer-map">bbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</body>
</html>​

CSS

html {
    height: 100%;
}

body {
    background-color: #F3F3F3;
    width: 100%;
    height: 100%;
    font-family: 'Helvetica Neue', helvetica, Arial, sans-serif;
    overflow: hidden;
}

* {
    margin: 0;
    padding: 0;
}

.offer-details {
    float: left;
    width: 30%;
    height: 100%;
    background-color: inherit;
    text-align: justify;
    overflow: auto;
}

.offer-map {
    float: left;
    width: 70%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-transition: opacity 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
    border-left: 5px solid #E1E1E1;
    overflow: auto;
    background-color: white;
}​

jQuery

$(function () {
        var width = $(document).width()+"px";
        var height = $(document).height()+"px";
        $('body').css({'width': width, 'height': height});
    })​

这是jsfiddle。当我为第二列尝试 69% 时，它正在显示，但没有覆盖屏幕。我怎样才能让列 30% 和 70% 覆盖屏幕？

全屏jsfiddle：http: //jsfiddle.net/yBNER/2/embedded/result/

谢谢！

4

2 回答 2

5

这是因为 5px 上的左边框.offer-map。由于盒子模型，这使得实际宽度为.offer-map70% + 5px。

一种解决方案是将框大小更改为border-box，例如

.offer-map {
    box-sizing: border-box;
}

虽然浏览器支持不同。见http://jsfiddle.net/yBNER/3/

另一种选择是用负的右边距偏移左边界，例如

.offer-map {
    margin-right: -5px;
}

见http://jsfiddle.net/yBNer/5/

于 2012-10-08T05:24:42.137 回答
1

简单地说，问题源于.offer-map一个border-left5px 的事实。

这是一个简单地使用包含 div 来达到预期效果的解决方案。

jsfiddle

于 2012-10-08T05:33:45.690 回答