CSS 文本与多个 Div 对齐

Question

我有一个问题，我有这些标记和 CSS 我想要的，H2 和 p 标签是相同的 Line.At 当 h2 稍微低于垂直 Line.I 不会使用边距或填充有任何解决方案吗？

感谢您的帮助。

.content-left {
    float: left;
    width: 50%;
}

.content-right {
    float: right;
    width: 50%;
}



.content-left, .content-right {
    min-height: 10em;
    padding-left: 2%;
    padding-right: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
}

.content-box {
    border-bottom: 1px dotted black;
    overflow: hidden;
    min-height: 5em;
}

.content-box ul {
    list-style: none;
}

.content-box ul li {
    text-indent: -1.4em;
    padding-bottom: .3em;

}

.content-box ul li {
    text-indent: -1.4em;
}

.content-box ul li:before {
    font-family: fontawesome;
    content: "\f054";
    float: left;
    width: 1.4em;
    margin-top: .2em;
    color: #0062ae;
    font-size: 1em;
}

.content-box ul {
    padding: 0;
}

.content-box p {

    font-weight: 300;


}

.content-box li {
    font-size: .9em;
    font-weight: 300;
}

.content-left h2 {
    color: #0062ae;
    text-align: right;
    word-wrap: break-word;

}
.content-right p {
    line-height: 1.5em;

}

<div id="main-content">
    <div class="wrapper">
        <div class="content-box">
            <div class="content-left">
                <h2 class="blue font-xs">...</h2>
            </div>
            <div class="content-right">



                        <p>..</p>


                        <p>...</p>


            </div>
        </div>

Answer 1

您的代码段无效，因为您没有在 CSS:

中设置 box-sizing 属性

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

看看这个jsFiddle。

如果未将 box-sizing 属性设置为 border-box，您添加的左右内边距会导致 content-left 和 content-right div 超过 50% 宽度。有关详细信息，请参阅 this document：

border-box: The width and height properties (and min/max properties) includes content, padding and border, but not the margin

Answer 2

默认情况下，填充会添加到块元素的宽度，例如。 2 个 50% 宽度和 1% 填充的 div 的总宽度为 102% - 因此您需要将它们设置为 49.5% 宽度和 1% 填充。

或者，您可以使用 box-sizing: border-box 使内边距成为宽度的一部分，这样 2 个 50% 宽度的 div 和 1% 内边距将各自保持 50% 宽度，因此总计为 100%。

Answer 3

我已经设置了 Box-sizing。看看我上传了完整的 fiddle，其中包含所有 CSS 个文件。

<a href="http://jsfiddle.net/4pqzLk5f/" rel="nofollow">http://jsfiddle.net/4pqzLk5f/</a>

.content-left {
    float: left;
    width: 50%;
}

.content-right {
    float: right;
    width: 50%;
}



.content-left, .content-right {
    min-height: 10em;
    padding-left: 2%;
    padding-right: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
}

.content-box {
    border-bottom: 1px dotted black;
    overflow: hidden;
    min-height: 5em;
}

.content-box ul {
    list-style: none;
}

.content-box ul li {
    text-indent: -1.4em;
    padding-bottom: .3em;

}

.content-box ul li {
    text-indent: -1.4em;
}

.content-box ul li:before {
    font-family: fontawesome;
    content: "\f054";
    float: left;
    width: 1.4em;
    margin-top: .2em;
    color: #0062ae;
    font-size: 1em;
}

.content-box ul {
    padding: 0;
}

.content-box p {

    font-weight: 300;


}

.content-box li {
    font-size: .9em;
    font-weight: 300;
}

.content-left h2 {
    color: #0062ae;
    text-align: right;
    word-wrap: break-word;

}
.content-right p {
    line-height: 1.5em;

}

<div id="main-content">
    <div class="wrapper">
        <div class="content-box">
            <div class="content-left">
                <h2 class="blue font-xs">...</h2>
            </div>
            <div class="content-right">



                        <p>..</p>


                        <p>...</p>


            </div>
        </div>

CSS 文本与多个 Div 对齐

CSS Text align with multiple Div's

css

html

vertical-alignment