12

だから私は自分のウェブサイトでユーザーのプロフィールページを扱っています。そして、CSSに少し問題があります。

私の問題は次のとおりです。固定幅で高さが可変の 4 つの div ボックスがあり、それらを上下に積み重ねたいと考えています。

下の画像は私の問題のスクリーンショットです。「最新のビデオ」というタイトルの div は、「基本情報」というタイトルの div に接着する必要があります。「連絡先」や「最新の写真」などです。

私の問題

私のhtmlは次のようになります：

<div style="margin-left:-10px">
    <div class="infoBox" style="width:360px;  margin-left:9px">
        Content goes here for basic info
    </div>
    <div class="infoBox" style="width:360px;  margin-left:9px">
        Content goes here for contact info
    </div>
    <div class="infoBox" style="width:360px;  margin-left:9px">
        Content goes here for latest photos
    </div>
    <div class="infoBox" style="width:360px;  margin-left:9px">
        Content goes here for latest videos
    </div>
</div>

情報ボックスの CSS クラスは次のようになります。

.infoBox {
    width: 100%;
    margin: -1px; 
    background-color:#37312d;
    padding:5px;
    border:#5b504a solid 1px;
    margin-bottom:9px;
    float:left;
}

これを機能させるにはどうすればよいですか？

4

5 に答える 5

6

divを列にネストすることはできません：

<div class="left-column">
    <div class="infoBox">...</div>
    <div class="infoBox">...</div>
</div>
<div class="right-column">
    <div class="infoBox">...</div>
    <div class="infoBox">...</div>
</div>

jQueryMasonryを試すことができます。これは、その使用法を示すフィドルです。

于 2012-09-10T18:53:03.133 に答える
1

コンテンツを2つの列に分割することをお勧めします。

HTML：

<div style="margin-left:-10px">
    <div class="column">
        <div class="infoBox" style="width:360px;  margin-left:9px">
            Content goes here for basic info
        </div>
        <div class="infoBox" style="width:360px;  margin-left:9px">
            Content goes here for latest videos
        </div>
    </div>
    <div class="column">
        <div class="infoBox" style="width:360px;  margin-left:9px">
            Content goes here for contact info
        </div>
        <div class="infoBox" style="width:360px;  margin-left:9px">
            Content goes here for latest photos
        </div>
    </div>
</div>

そしてCSSに以下を追加します：

.column{float:left; width:50%;}

更新：このソリューションを使用する場合、列内のボックスをフロートする必要はありません

于 2012-09-10T18:59:47.360 に答える
1

のようにボックスを列に配置できます。これは非常に基本的なグリッド システムですが、基本的な考え方を示しています。つまり、列を形成するラッパー div 内にボックスを積み重ねています。

サイト全体でこのパターンを繰り返す場合は、より形式化されたグリッド システムを使用することをお勧めします。「css グリッド システム」で検索するだけで、多くの例を見つけることができます。

于 2012-09-10T18:57:09.477 に答える
0

このコードで試すことができます

#bottom{
    width: ???px;
    height: ???px;
    background-color: black;
}
#top{
    width:???px;
    height:???px;
    background-color:red;
    z-index: 999;
}


<div id="bottom">
    <div>......</div>
  <div id="top">......</div>
</div>
于 2012-09-10T18:56:07.053 に答える