0

下の画像は、私が実現したいと考えている単純な構造を示しています。私が抱えている問題は、2 番目の行を構造化する最善の方法を考えていることです。ページの幅全体に背景色を適用したいのですが、この行をドキュメントの中央にある 2 つの列に分割し、Web ページのサイズを変更しても中央に残ります。これどうやってするの？

その後、画像にマージントップを配置できると思います。

3 行のドキュメントを示す画像。最初の行はシンプルで、2 番目の行は中央で分割された 2 つの列に分割されています。 左側の列には、3 行目を指す矢印があります。

これまでの私の試みは次のとおりです。

<div id="wrapper">
        <div id="logo">
            <img src="webpageLogo.png" alt="imageOfLogo" width="125" height="125"/>
        </div>
        <div id="twoCol">
            <div id="left">
                <p>TextBox Here.</p>
            </div>
            <div id="right"> 
                <img src="images/laptop.png" alt="An image of a laptop" />
            </div>
        </div>
        <div id="content">

</div>

CSS :

#wrapper
{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

#twoCol
{
    height : 400px; 
    text-align: center;
    background: red;
}

#left
{
    float:left;
    text-align:right;
}

#right
 {
     float:right;
     text-align:left;
}

#twoCol{
    margin-left:auto;
    margin-right:auto;
  }

ただし、ここの 2 行目は希望どおりに表示されず、サイズも変更されません。どうすればこれを修正できますか?

4

2 に答える 2

0

Bootstrap の前からこのようなものを構築していたので、個人的には手作業で構築していました。私は次のようにします：

http://jsfiddle.net/SAYtS/

ページ全体を含む div でラップする代わりに、各ページ セクションを個別に実行してから、各ページ セクション.page内に共通の div を追加して、ドキュメント全体で幅と中央揃えを一貫して設定します。次にdisplay:inline-block、2 つの列を取得できます。2 つの div をフロートすることもできますが、ラッパー div が崩壊するのを防ぐために、 おそらく clearfloat ( http://www.webtoolkit.info/css-clearfix.html ) 修正を使用する必要があります。

于 2013-05-17T00:25:13.593 に答える
0

ブートストラップ グリッドのようなグリッド システムの使用を検討することをお勧めします。

やりたいことを正確に実行するために、さまざまな方法で生活がとても簡単になります。さらに、サイズを変更したり、モバイルに合わせて調整したりすることもできます..

使い方を理解するのに 10 ～ 15 分かかります。後で CSS コードをハックして機能させる手間を省くことができます。

http://webdesign.tutsplus.com/tutorials/complete-websites/twitter-bootstrap-101-the-grid/

http://www.revillewebdesign.com/twitter-bootstrap-tutorial/

于 2013-05-17T00:16:47.647 に答える