17

私はこのコードでほぼ半日遊んでいて、ついにそれをあなたに渡すことにしました。div左右の要素がメインの要素を囲んで、3つの要素を並べて配置したいと思います。両方の外側のdivに背景画像のみを含めて、中央と同じ高さにしたいと思いますdiv。私はこのような他の投稿からの解決策で遊んでいますが、私の試みはすべて失敗しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>  
</head>
<body>
<div id="container">
    <div id="left"></div>
    <div id="content">
        <p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
    </div>
    <div id="right"></div>
</div>
</body>

CSS：

body {
    text-align: center;
}

div#container {
    width: 954px;
    margin: 0px auto;
    height: 100%;
    border: 1px solid lime;
    overflow: hidden;
    position: relative;
}

div#left {
    margin: 0px auto;
    width: 5px;
    border: 1px solid red;
    float: left;
    display: block;
}

div#right {
    margin: 0px auto;
width: 5px;
float: left;
border: 1px solid blue;
}

div#content {
    width: 920px;
    margin: 0px auto;
    text-align: left;
    background: #ffffff;
    padding: 0px 10px;
    float: left;
}
p {
    font: normal 16px/18px 'Trebuchet MS', Helvetica, sans-serif;
    margin: 20px 0px;
}

よろしくお願いします。

4

3 に答える 3

27

タグとdiv クラスに追加height: 100%する必要があります。bodyhtml

html {
    height: 100%; /* <------------ */
}

body {
    text-align: center;
    height: 100%; /* <------------ */
}

div#container {
    width: 954px;
    margin: 0px auto;
    height: 100%;
    border: 1px solid lime;
    overflow: hidden;
    position: relative;
}

div#left {
    margin: 0px auto;
    width: 5px;
    border: 1px solid red;
    float: left;
    display: block;
    height: 100%; /* <------------ */
}

div#right {
    margin: 0px auto;
    width: 5px;
    float: left;
    border: 1px solid blue;
    height: 100%; /* <------------ */
}

div#content {
    width: 920px;
    margin: 0px auto;
    text-align: left;
    background: #ffffff;
    padding: 0px 10px;
    float: left;
    height: 100%; /* <------------ */
}
于 2012-11-28T21:36:42.197 に答える
4

これがあなたの質問に実際に答えていないことはわかっていますがposition:relative、親要素とposition:absoluteキャッピング要素を使用する方法を好む傾向があります。これにより、動的に変化するボックスがレイアウトを乱さないことが保証されます。また、セマンティック上の理由から :before :after 属性 (IE 8 以降) を使用するのが好きですが、代わりに子要素を使用することもできます。正常に動作します。また、ボックスのサイズ変更 (FF には -moz 構文が必要) も追加して、境界線が見苦しくならないようにしました。(代わりに背景を使用するため、プロダクション環境ではおそらく必要ありません)。

そして、コード！

CSS

div#container:before {
    content:"";
    width: 5px;
    border: 1px solid red;
    display: block;
    position:absolute;
    height:100%;
    left:0px;
    top:0px;
    box-sizing:border-box; /* careful... FF needs -moz if you need that compatibility */
}

div#container:after {
    content:"";
    width: 5px;
    border: 1px solid blue;
    display: block;
    position:absolute;
    height:100%;
    right:0px;
    top:0px;
    box-sizing:border-box;
}

HTML

<div id="container">
    <div id="content">
        <p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
    </div>
</div>

デモ

http://jsfiddle.net/f7yL6/
http://jsfiddle.net/f7yL6/show

于 2012-11-28T21:47:14.033 に答える
0

メディア クエリを使用すると、% が提供するほとんどの機能を問題なく実現できます。スムーズではありませんが、イントロ バナーに使用する場合は問題ありません。

モバイル宣言を最初に使用すると、次のようなものを使用できます。

.banner { height: 200px; }

@media all and (min-width: 500px) {
  .banner { height: 400px; }
}

@media all and (min-width: 1000px) {
  .banner { height: 500px; }
}

編集: min-width を使用しましたが、min-height も使用できます。あらゆる種類のデバイスで見栄えを良くするには、最小幅と最小高さを組み合わせて使用​​する必要があります。

于 2013-05-29T09:02:20.830 に答える