CSS文本与多个Div对齐

西蒙·波斯纳

我有一个问题,我想要这些标记和CSS,H2和p标签是同一条Line。一个解法?

谢谢你的帮助。

.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>

乔治

您的代码段无效,因为您缺少box-sizing在CSS中设置属性的权限:

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

看看这个jsFiddle

如果不设置box-sizing属性border-box,您加入造成了左,右内边距content-leftcontent-rightdiv的超过50%的宽度。有关更多详细信息,请参见此文档

border-box:width和height属性(以及min / max属性)包括内容,内边距和边框,但不包括边距

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS对齐div底部的文本

来自分类Dev

水平对齐多个div(CSS)

来自分类Dev

CSS-如何对齐div和文本

来自分类Dev

在Div CSS中对齐图像和文本

来自分类Dev

CSS:在div顶部垂直对齐文本

来自分类Dev

HTML / CSS在div中对齐多个元素

来自分类Dev

CSS - 文本与其他 div 中的文本对齐

来自分类Dev

html css 外层 div 文本居中对齐,内 div 文本左对齐

来自分类Dev

HTML / CSS:我的div中的文本未对齐?

来自分类Dev

CSS-无法在div中将图像和文本对齐

来自分类Dev

使用CSS在div内垂直对齐文本

来自分类Dev

CSS3:多个旋转的div垂直对齐

来自分类Dev

CSS3:多个旋转的div垂直对齐

来自分类Dev

CSS文本与innerHTML对齐

来自分类Dev

在容器中对齐多个文本

来自分类Dev

CSS DIV对齐问题

来自分类Dev

CSS div水平对齐

来自分类Dev

对齐Div Boxs CSS

来自分类Dev

CSS div中心对齐

来自分类Dev

CSS中的Div对齐

来自分类Dev

对齐3 div的CSS

来自分类Dev

如何使文本右对齐,但div居中对齐?

来自分类Dev

文本在div内左对齐

来自分类Dev

使用flexbox对齐div文本

来自分类Dev

div上的文本对齐方式

来自分类Dev

如何在 CSS 的同一行上对齐包含文本的 div 和包含图像的 div?

来自分类Dev

对齐一行中的多个div,将文本垂直和水平居中

来自分类Dev

当显示多个文本行时,如何从内联块样式对齐div的元素?

来自分类Dev

CSS垂直文本旋转对齐