0

過去 1 時間、これを修正しようとしてきましたが、わかりません。メイン divの最後の<p>要素がフォームを押し下げていますが、その理由がわかりません。フォームの上の空白を取り除くにはどうすればよいですか?

ライブサイトはこちら

CSS:

    div.main {
    h1 {width: 50%;} 
    .number {width: 46%;}
    p {width: 50%; margin: 2% 0 2% 2%; float: left; }
    }


    form.contact {
    width: 46%;
    float: right;
    margin: 0;


    input, textarea {display: block; padding: 5px; margin: 5px 0; width: 95%;}
    textarea {height: 130px;}
}

HTML:

<div class="main clearfix">
<h1>Glasgow Joiner</h1><span class="number">01698 818209</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, turpis at laoreet gravida, nunc ipsum faucibus mauris, nec semper risus massa vel dolor. Maecenas egestas consequat arcu at porttitor. Pellentesque placerat feugiat nisl, sed volutpat risus ultricies eu. Quisque luctus orci quis odio blandit consectetur. Pellentesque tristique est eu nisi molestie pulvinar. Vestibulum pharetra id nisl eu ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis viverra condimentum orci, vitae vestibulum diam tempor ut. Suspendisse blandit egestas lacus vel vestibulum. Integer eleifend augue nec rutrum sagittis. Vivamus lobortis molestie rutrum. Vestibulum congue lacus ac semper malesuada.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, turpis at laoreet gravida, nunc ipsum faucibus mauris, nec semper risus massa vel dolor. Maecenas egestas consequat arcu at porttitor. Pellentesque placerat feugiat nisl, sed volutpat risus ultricies eu. Quisque luctus orci quis odio blandit consectetur. Pellentesque tristique est eu nisi molestie pulvinar. Vestibulum pharetra id nisl eu ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis viverra condimentum orci, vitae vestibulum diam tempor ut. Suspendisse blandit egestas lacus vel vestibulum. Integer eleifend augue nec rutrum sagittis. Vivamus lobortis molestie rutrum. Vestibulum congue lacus ac semper malesuada.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, turpis at laoreet gravida, nunc ipsum faucibus mauris, nec semper risus massa vel dolor. Maecenas egestas consequat arcu at porttitor. Pellentesque placerat feugiat nisl, sed volutpat risus ultricies eu. Quisque luctus orci quis odio blandit consectetur. Pellentesque tristique est eu nisi molestie pulvinar. Vestibulum pharetra id nisl eu ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis viverra condimentum orci, vitae vestibulum diam tempor ut. Suspendisse blandit egestas lacus vel vestibulum. Integer eleifend augue nec rutrum sagittis. Vivamus lobortis molestie rutrum. Vestibulum congue lacus ac semper malesuada.</p>
                    <form class="contact">
                        <h2>Get a FREE Quote Today!</h2>
                        <label for="name">Name:</label>
                        <input type="text" name="name">
                        <label for="email">Email Address:</label>
                        <input type="text" name="email">
                        <label for="phone">Telephone Number:</label>
                        <input type="text" name="phone">
                        <label for="message">Message:</label>
                        <textarea name="message"></textarea>
                        <input type="submit">
                    </form>
</div>
4

4 に答える 4

1

最後にクリアされた要素の右側に浮かんでいます。H1 とスパンの直後にフォームを配置すると、右上に表示されます。

于 2013-06-10T21:01:51.640 に答える
0

これを行っている理由は次のとおりです。

個々の段落を巨大な文字として視覚化してみてください。通常の本では、文字はすぐ右に移動し、スペースがなくなると次の行に移動します。段落に右に移動するスペースがない場合は、下に移動します。ただし、フォームはその右に移動するのに十分小さいです。

フォームとテキストを 2 つの異なる div に配置してから、paragraph-div と form-div の両方を左にフロートさせます。

または、内に別の div を作成しmain clearfix、その中にフォームを配置することもできます。

いずれにせよ、両方とも左にフロートする必要があり、フォームと段落を同じ div 内に並べて配置すると、これらの不具合が発生する可能性があります。

于 2013-06-10T21:10:25.953 に答える