0

私は3列のデザイン（2つの側面-左と右-と主要な記事）を持つためにfloat/clearメソッドを使用するWebサイトを持っています。

両方とも浮かんでいますが（一方は左、もう一方は右）、記事内に自動的に生成された、明確なフォームを含める必要があります。両方が含まれています。これにより、透明なため、フォームが傍白の下に表示されます。

私は何か見落としてますか？この状況で私は何ができますか？ウェブサイトを作ってからしばらく経ちましたが、ここで立ち往生しています。

これが私の問題のミニマリストコードです：

jsfiddle.net/89kpd/

フォームの内容を「マイフォーム」のタイトルのすぐ下に配置したいと思います。

私が考えることができたのは、代わりにフォーム内でdisplay：inline-blockを使用することでした。

jsfiddle.net/89kpd/2/

ただし、内部コンポーネントを変更する必要がありますが、変更したくない場合があります。

しかし、float / clearメソッドを使用せずに、最初にサイトを設計するためのより良い方法があるかもしれません。私が何かを作るべきなのはここだと思います。IE6の互換性は気にしません。IE7の場合はわかりますが、おそらく重要ではありません...

4

2 に答える 2

0

どうやら、全体の幅は500pxである必要があります。このHTMLを試してください：

<div id="blue">
    <aside id="black"></aside>
    <article id="main">
        <h2 class="center">My Form:</h2>
        <div class="row">
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" />
        </div>
        <div class="row">
            <label for="email">Email:</label>
            <input type="text" name="email" id="email" />
        </div>
    </article>
    <aside id="red"></aside>
    <br clear="all" />
</div>
<br clear="all" />

CSS：

#blue{background:blue; width: 500px; height: 600px; color:white;}

#black{float:left; background:black; width: 120px; height: 345px; float: left;}

#red{float:left; background:red; width: 120px; height: 345px; float:right;}

#main{float:left;width:260px;}

label { float:left; width:100px; }

input { float:left; width: 150px; color:black; }

.row { clear: both; }

h2 { font-size:20px; text-align:center; }
于 2012-08-27T18:59:20.583 に答える
0

#main divを左にフロートさせて、他のフロートされたdivの間にフロートするようにしてください。

jsFiddleの例

追加：

#main {
 float:left;   
}​

CSSに

于 2012-08-28T12:33:06.700 に答える