Question

我无法弄清楚如何在

之间找到差距

    <div class="info">
        <p>Location:</p>
        <p>Dominion Theatre, W1T 7AQ</p>
    </div>

和

    <form>
        <label>Name (Required)
            <input type="text" placeholder="Name" required>
        </label>
    </form>

我将如何去做呢。我试过使用保证金/填充而没有任何运气？

HTML

<div class="bt fbCenter">
    <div class="fb">
        <div class="info">
            <p>Event Starts:</p>
            <p>25th December 2014 19:00</p>
        </div>
        <div class="info">
            <p>Event Ends:</p>
            <p>25th December 2014 21:00</p>
        </div>
        <div class="info">
            <p>Location:</p>
            <p>Dominion Theatre, W1T 7AQ</p>
        </div>
        <form>
            <label>Name (Required)
                <input type="text" placeholder="Name" required>
            </label>
        </form>
    </div>
</div>

CSS

.bt input {
    border: 1px solid #ccc;
    color: rgb(60, 60, 60);
    display: block;
    width: 70%;
    padding: 1em;
    text-align: left;
    margin-bottom: 2.5em;
}
.bt button {
    width: 100%;
    padding: 1.5em;
    background-color: #1f1f1f;
    color: #fff;
    border: 0;
}
.bt button:hover {
    background-color: #818181;
    cursor:pointer;
}
.fbCenter {
    text-align: center;
}
.bt .fb {
    border: 1px solid #818181;
    padding: 2em;
    color: #585858;
    display: inline-block;
    text-align: left;
    width: 75%;
}
.fb .info {
    width: 100%;
    margin-bottom: 1em;
}
.fb p {
    float: left;
}
.fb p:nth-of-type(even) {
    width: 80%;
}
.fb p:nth-of-type(odd) {
    width: 20%;
}
.fb p.last {
    width: 100%;
    font-weight: 100;
}

Fiddle here

Answer 1

请注意边距折叠和浮动折叠。

在from的顶部添加一个marging并清除info div中的浮点数

.fb form{
    margin-top:2em;}

.fb .info {
    width: 100%;
    margin-bottom: 1em;
    clear:both;
}

.fb form{
    margin-top:5em;}

.bt input {
    border: 1px solid #ccc;
    color: rgb(60, 60, 60);
    display: block;
    width: 70%;
    padding: 1em;
    text-align: left;
    margin-bottom: 2.5em;
}
.bt button {
    width: 100%;
    padding: 1.5em;
    background-color: #1f1f1f;
    color: #fff;
    border: 0;
}
.bt button:hover {
    background-color: #818181;
    cursor:pointer;
}
.fbCenter {
    text-align: center;
}
.bt .fb {
    border: 1px solid #818181;
    padding: 2em;
    color: #585858;
    display: inline-block;
    text-align: left;
    width: 75%;
}
.fb .info {
    width: 100%;
    margin-bottom: 1em;
    clear:both;
}
.fb p {
    float: left;
}
.fb p:nth-of-type(even) {
    width: 80%;
}
.fb p:nth-of-type(odd) {
    width: 20%;
}
.fb p.last {
    width: 100%;
    font-weight: 100;
}

<div class="bt fbCenter">
    <div class="fb">
        <div class="info">
            <p>Event Starts:</p>
            <p>25th December 2014 19:00</p>
        </div>
        <div class="info">
            <p>Event Ends:</p>
            <p>25th December 2014 21:00</p>
        </div>
        <div class="info">
            <p>Location:</p>
            <p>Dominion Theatre, W1T 7AQ</p>
        </div>
        <form>
            <label>Name (Required)
                <input type="text" placeholder="Name" required>
            </label>
        </form>
    </div>
</div>

请注意，表单顶部的边距需要大于.info类底部的边距。这是由于保证金折叠（https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing＆amp; http://www.sitepoint.com/web-foundations/collapsing-margins/）

您可能也应该熟悉Clearfix，它是如何工作的，为什么以及何时需要它。

我不是float的粉丝，所以这里alterate version使用display:table，display:table-row和display:table-cell

Answer 2

您可以创建另一个类，在这两个类之间插入，例如此示例http://jsfiddle.net/2kkep4qs/8/

HTML

<div class="info">
     <p>Location:</p>
     <p>Dominion Theatre, W1T 7AQ</p>
 </div>
 <div class="bt-space"></div>
 <form>
     <label>Name (Required)
         <input type="text" placeholder="Name" required>
     </label>
 </form>

CSS新课

.bt-space{padding:25px;}

Answer 3

您可以执行<hr>并将其涂成白色或

你总是可以在div和form之间添加一个空div：

<div class="info">
         &nbsp;
    </div>

在div和表单之间创建差距

3 个答案: