どうやってdivの上と上にdivをスタックするのですか？

私はhtmlやcssについてよく分かりませんが、私はこれを多くしました。私はそれがこの（悪い図面を言い訳してください）のように見えるように、divを積み重ねたいどうやってdivの上と上にdivをスタックするのですか？

enter image description here

。

enter image description here

私はどのようにGoogleで検索し、異なるものが、同類を試してみました/ボックスは常に動いていないに終わるか、非常に右/左非常に移動嫌い。

<div style="float:left;width:300px;height:350px;text-align:center;"> 
<div style="float:left;width:500px;height:200px;text-align:center;"> 
<div id="wrapper"> 
<div style="align=center;"> 
<div id="first">1</div> 
<div id="second">2</div>

これは私が持っている3つのdivです。最初にリンクがあります[追加/メッセージなど]

2番目のものは "thelastgecko"とプロファイルテキストを持っています。

そして、私は好き嫌いのために最後のボックスを使用しようとしていますが、それを行っているすべてのものは動作していません。

出典

2013-04-12 user2275909

http://stackoverflow.com/questions/1909648/stacking-divs-on-top-of-each-other –

この –

通常、1つの「巨大な」divを使用し、1024ピクセル幅以下に設定すると、古い画面で表示できるようになり、通常画面中央に中央揃えになります。その大きな区画の中に「浮動小数点：左」または「位置：絶対」の「私のメッセージのギャラリーを追加」を置く。後者を好む。 "最後のゲッコ" +嫌いなものを含む別のdivを&が好きで、divの中心に置いた後、別のdivを作って、 "float：right"または "position：absolute; left： 'これを差し引いた幅 "となる。

コードを離れて渡すと、はも教えてくれたので、すべてをテキストで書いて読んだ。

しかし、あなたはまだそれが、ここに私の考えだ取得していない場合には：

<html> 
    <head> 
    <style> 
     body{margin:0px;padding:0px;width:100%;height:100%;} 
     #container{width:900px;margin:auto;margin-top:200px;} 
     #add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;} 
     #last_gecko,#holder{margin:auto;width:500px;background-color:#eca;} 
     #likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;} 
     #dislikes{background-color:#cea;} 
     #dislike_text{margin-left:700px;background-color:#eac;} 
    </style> 
    </head> 
    <body> 
    <div id="container"> 
     <div id="add_me">add me<br>message me<br>wuts going on</div> 
     <div id="dislike_text">dislike text</div> 
     <div id="last_gecko"> 
     Last Gecko 
     <div id="holder"> 
      <div id="dislikes">dislikes</div> 
      <div id="likes">likes</div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

は、それが実行可能で作られ、それが移動するどのような方向に少なくともショーあなたの意志、それはないかもしれません最良の方法ですが、それは私の方法です。

出典

2013-04-12 21:30:15

'を用いないため、' Z-index'を使用します表示：インラインブロック; '？あなたはそれを嫌っているのですか、それを知らないのですか？彼の質問に答えることが重要だと思った。 – Hydrox24

申し訳ありませんが、私は外国人です！ –

私が管理している何十種類ものサイトのアナリティクスに1024pxのディスプレイが表示されて以来、どれくらいの時間が経過しているかはわかりません。確かに、私は約1000pxの幅をとにかく構築しますが、古い画面で1024を正当化している場合は、IE6をまだ受け入れている方が良いでしょう。両方ともウェブ使用率のごくわずかな割合を占めています（とにかく米国内）。 – Mike

あなたはこのような何かを行うことができます：http://jsfiddle.net/jAKgd/

CSS

 #wrapper { 
      width: 800px; 
     } 
     #leftColumn { 
      float: left; 
      height: 800px; 
      width: 200px; 
      margin-right: 5px; 
     } 
     #leftColumn a { 
      display: block; 
     } 
     #rightColumn { 
      width: 100%; 
     } 
     #contentDislike, 
     #contentLike { 
      display: inline-block; 
      width: 250px; 
     }

は明らかに高さ/幅は、あなたのニーズに合わせて変更することができます。私はちょうど良い例をやっていた。

HTML

<div id="wrapper"> 
    <div id="leftColumn"> <a href="#">Link</a> 
    <a href="#">Link</a> 
    <a href="#">Link</a> 
    <a href="#">Link</a> 
    <a href="#">Link</a> 
    </div> 
    <div id="rightColumn"> 
    <div id="contentTop"> 
     <img src="/images/image_name.jpg" alt="image text here" /> 
     <p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p> 
    </div> 
    <div> 
     <div id="contentDislike">DISLIKE CONTENT HERE</div> 
     <div id="contentLike">LIKE CONTENT HERE</div> 
    </div> 
    <div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div> 
    </div> 
</div>

出典

2013-04-12 21:56:41 Biotox

それはいくつかの場所でdivを配置するために山車を使用するように設計の悪い方法です。これは、フレックスレイアウトなどを使用する方がはるかに良い方法です。しかし、これはすべてのブラウザでサポートされているわけではありません（ただし、可能であれば、このオプションを利用してください）。

もう1つの解決策は、次のとおりです。 widthオプションを使用します。 htmlの任意のdivの幅を、固定された数（もちろんパーセント）に設定します。Watch this example これを行うなら、あなたは非常に大規模で非常に小さなスクリーンに注意を払わなければならないでしょう、私は(max-width)と(min-width)で動作している代替CSSスタイルシートを書かなければならないと思います。

もう1つの解決策があります：グリッドレイアウト。それは2013年以来の標準の一部です（私は思う）が、それはまだ十分にサポートされていません。しかし、将来的にはおそらく。私は助けることができる

希望

出典

2017-02-02 20:29:22 Asqiir

どうやってdivの上と上にdivをスタックするのですか？

答えて

関連する問題