0

これが私の問題の画像です：

レンダリングされたページのスクリーンショットhttp://cl.ly/image/0E2N1W1m420V/Image%202012-07-22%20at%203.25.44%20PM.png

私の最初のエラーは、バナーと「Webデザイン」の間にたくさんの空きスペースがあることdivです。私の2番目のエラーは、「Web開発」divが「Webデザイン」の横にある必要があるということdivです。これらdivの幅は両方とも23％として指定されており、floatプロパティを使用してみましたが、どちらも機能しませんでした。

HTML：

<div id="maininfo">
    <div id="eyediv">
        <li><a class="eye"></a></li>
        <h1>Web Design</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia condimentum dignissim. Suspendisse potenti. Nunc in metus id lorem accumsan vehicula. Proin posuere lacus id odio tincidunt mattis sit amet et sapien. Nulla facilisi. Quisque sodales risus eget mauris adipiscing vitae scelerisque metus mattis. Praesent lectus purus, feugiat eleifend faucibus nec, volutpat sed eros. Praesent quis ante pharetra mauris pretium porttitor.</p>
        <button type="button">SEE MORE</button>
    </div>

    <div id="spannerdiv">
        <li><a class="spanner"></a></li>
        <h1>Web Development</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia condimentum dignissim. Suspendisse potenti. Nunc in metus id lorem accumsan vehicula. Proin posuere lacus id odio tincidunt mattis sit amet et sapien. Nulla facilisi. Quisque sodales risus eget mauris adipiscing vitae scelerisque metus mattis. Praesent lectus purus, feugiat eleifend faucibus nec, volutpat sed eros. Praesent quis ante pharetra mauris pretium porttitor.</p>
        <button type="button">SEE MORE</button>
    </div>

CSS： 

#maininfo {
    clear: both;
}

#maininfo li {
    list-style: none;
}

#eyediv {
    margin-left: 15%;
    width: 23%;
}

#spannerdiv {
    width: 23%;
    padding-left: 3px;
    float: left;
}
4

3 に答える 3

2

私のコメントで最初に述べたようにclear: both、要素がディスプレイのその「線」をそれ自体に持つように強制し、他の浮動要素がそれに整列するのを防ぎます。その宣言を削除すると、必要に応じてフローティングを再開できるようになります。

またfloat、要素が一緒に表示されるようにする必要があります。

于 2012-07-22T14:50:33.230 に答える
1

取り外しclear: both;て適用float: left;

于 2012-07-22T14:49:59.380 に答える
0

clear:both;親 div maininfoに適用され、子 div には適用されないため、問題にはなりません。これは、maininfo div にそれ自体への行を持たせるだけです。

floaton spannerdivはそれのみをフロートさせ、 eyedivの隣に配置する必要はありませんposition: relative。

2 つの div を隣り合わせに並べるために、別のことを行うことをお勧めします。整列させたい div (この場合は eyediv と spannerdiv) を親 div でラップし、CSS を使用して子 div を指定しdisplay:inline-block;ます。また、それらを垂直方向に配置することもできます。何かのようなもの：

HTML

<div id="wrapperdiv">
    <div id="eyediv">
        <li><a class="eye"></a></li>
        <h1>Web Design</h1>
        <p>Lorem ipsum dolor...</p>
        <button type="button">SEE MORE</button>
    </div>

    <div id="spannerdiv">
        <li><a class="spanner"></a></li>
        <h1>Web Development</h1>
        <p>Lorem ipsum do...</p>
        <button type="button">SEE MORE</button>
    </div>
</div>

CSS

#eyediv {
    margin-left: 15%;
    width: 23%;
}

#spannerdiv {
    width: 23%;
    padding-left: 3px;
    float: left;
}

#eyediv, #spannerdiv {
    display: inline-block;
    vertical-align: top;
}

ここで必要なのは、必要な場所に親 div を配置することだけです。

それが役に立てば幸い

于 2012-07-23T16:04:25.577 に答える