5

私は html や css についてあまり知りませんが、これだけのことはしました。

ここに画像の説明を入力

このように div をスタックしたい (悪い描画を許してください);

ここに画像の説明を入力

方法をグーグルで検索して別のことを試しましたが、好き/嫌いボックスは常に動かないか、一番左/一番右に移動します。

<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」とプロフィール テキストです。

そして、好きなもの/嫌いなものに最後のボックスを使用しようとしていますが、何をしても機能しません。

4

3 に答える 3

2

通常、1 つの「巨大な」div を使用し、幅を 1024 ピクセル未満に設定して、古い画面でも表示できるようにし、通常は画面の中央に配置します。次に、その大きな div 内に、「add me - message me - gallery」を「float:left」または「position:absolute」で配置します。私は後者を好みます。次に、「最後のヤモリ」+嫌いなものと好きなものを含む別のdivを作成し、そのdivを中央に配置します。その後、別のdivを作成して、「float:right」または「position:absolute; left:'huge width」を実行しますこの幅を引いたもの」です。

私はすべてをテキストで読みやすく書きました。なぜなら、コードを手放しても教えられないからです。



しかし、それでもわからない場合のために、私の考えは次のとおりです。

<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-12T21:30:15.767 に答える
0

次のようなことができます: 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-12T21:56:41.397 に答える