css - 元素下推形式

Question

过去一个小时我一直在尝试解决这个问题，我就是想不通。我的主 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>

Answer 1

它浮动到最后一个清除元素的右侧。将表单直接放在 H1 和 span 之后，您会在右上角看到它。

Answer 2

更好的方法是用 div 包装段落，并设置float: left;为两个元素：

<div class="main clearfix">
<div class="content">
<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>
</div>
<div class="right">
                    <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>
</div>

为侧边栏添加更多元素会更容易。对于未来，我建议使用诸如研磨 css 模板之类的东西。

Answer 3

如果您删除所有保证金，您可能会从逻辑上找出原因！

将所有 p 标签放入 div 并使其向左浮动 50%

以我的名字命名：

<div id="left_keo"> 
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</div>
<div id="right_keo">
  <form>
    ...
  </form>
</div>

有 100000000 和 1 种方法，但第一，你需要一个稳定的布局，第二：你需要保持你的代码清晰干净！！！

这是非常非常基础的布局。

Answer 4

它这样做的原因是：

尝试将每个单独的段落可视化为一个巨大的字母。在一本普通的书中，字母会直接放在它的右边，当空间用完时会转到下一行。如果该段落没有空间可以向右移动，那么它将在下方。但是，表格足够小，可以转到右侧。

尝试将表单和文本放在两个不同的 div 中，然后让段落 div 和表单 div 都向左浮动。

或者，您可以在 中创建另一个 div ，然后将表单放入其中。main clearfix

无论哪种方式，它们都应该向左浮动，并且将表单和段落放在同一个 div 中彼此相邻可能会导致这些故障。