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>

为侧边栏添加更多元素会更容易。为了将来我建议使用像grind 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>

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

这是布局的基础。

Answer 4

这样做的原因是：

尝试将每个段落可视化为一个巨大的字母。在正常的书中，字母将直接向右移动，并在空间不足时转到下一行。如果段落没有向右移动的空间，那么它将在下面。但是，表单足够小，可以向右移动。

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

或者，您可以在<{1}}中创建另一个div ，并将表单放在其中。

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

<p>元素按下表格</p>

4 个答案: