0

ボディ幅 100%、1 列幅 30%、その他 70% で 2 列のレイアウト ページを実装しようとしています。しかし、2 番目の列 [幅: 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があります。2 番目の列で 69% を試したところ、表示されていましたが、画面を覆っていませんでした。画面をカバーするために、列を 30% と 70% の両方にするにはどうすればよいですか?

フルスクリーン jsfiddle: http://jsfiddle.net/yBNEr/2/embedded/result/

ありがとう！

4

2 に答える 2

5

これは、の5pxの左境界線が原因です.offer-map。ボックスモデルのため、これにより実際の幅は.offer-map70％+5pxになります。

1つの解決策は、ボックスのサイズを次のように変更することです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

簡単に言えば、問題は5pxのという事実から生じ.offer-mapています。border-left

これは、含まれているdivを使用して目的の効果を実現するソリューションです。

jsfiddle

于 2012-10-08T05:33:45.690 に答える