0

説明するのが難しいかどうかはわかりませんが、ここでは..ページに多数の div があり、それらを列レイアウトにしたいと考えています。このページには、ナビゲーション バー、ロゴ、いくつかのプロファイル データ、さらに 3 つの div があります。これらの 3 つの div が正しく配置されていません。1枚目は左に浮かせ、2枚目はその直後なので同じく浮かせています。3 番目を右にフロートさせたいが、最初の 2 つと整列させたい。

このフィドルを参照してください。

.commitment_boxそれらに合わせて div を正しくフロートさせたい.major_data。

CSS:

.major_data {
    margin: 110px auto;
    width: 40%;
}
.major_data .profile_box p:first-child {
    border-bottom: 0px;
    text-align: center;
    font-size: 20px;
    margin-top: 0px;
    background-color: #eee;
    font-weight: bold;
}
.major_data .profile_box p:nth-child(2) {
    text-align: justify;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: -20px;
}
.major_data .profile_box p {
    border: 1px solid #bbb;
}
.commitment_box { /*the div i want to be floated right in alignment with those about boxes */
    margin-top: -58.2%;
    text-align: center;
    height: 40px;
    overflow: hidden;
    background-color: lightblue;
    color: white;
    font-size: 20px;
    width: 25%;
    margin-right: 2%;
    float:left;
}
.commitment_box .commitment p {
    display: inline-block;
    margin-top: 1.5%;
}
.commitment_box .commitment p:first-child {
    font-weight: bold;
    margin-right: 20px;
}

HTML:

<div class="commitment_box">
    <!--/*the div i want to be floated right in alignment with those about boxes */-->
    <div class="commitment">
        <p>Alex:</p>
        <p>He's works great.aidhoaishdoaishdoaishdoaishdoaihdoaishdoaishdoasihdoasidhoasihd</p>
    </div>
    <div class="commitment">
        <p>Alex 1:</p>
        <p>He's works great.</p>
    </div>
    <div class="commitment">
        <p>Alex 2:</p>
        <p>He's works great.</p>
    </div>
    <div class="commitment">
        <p>Alex 3:</p>
        <p>He's works great.</p>
    </div>
    <div class="commitment">
        <p>Alex 4:</p>
        <p>He's works great.</p>
    </div>
</div>
4

2 に答える 2

1

floatを避けるようにしてください。これはあまり良いコーディング スタイルではありません。

大きなセクションをinline-block要素として作成し、それらを与えます。たとえば、width: 30%

これは、重要な変更を確認できるように単純化されたスタイルのjsFiddleです。

于 2013-07-15T10:57:18.003 に答える
0

.major_data ボックスにも float:left を配置し、両方のボックスに同じ上部マージンを配置する必要があります。

于 2013-07-15T10:35:53.790 に答える