2

我是纯 css的新手，它既好又容易！

我的 HTML：

<header class="pure-u-1 pure-u-md-1-1">
<div class="pure-u-4-5">

    <div class="left-in-header pure-u-3-8">This should be in left</div>

</div>

</header>

我的 CSS：

@font-face{
    font-family: 'myfont';
    src: url('myfont.ttf');
}


html, button, input, select, textarea, *, * *,
.pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
    font-family: 'myfont', Times, "Times New Roman", serif !important;
}

html{
    direction:rtl;
    box-sizing: border-box;

}


*, *:after, *:before{
    box-sizing: inherit;
}

*{
    margin:0;
    padding:0;
}

header{
    color:white;
    background:#b90101;
    background: rgba(200,1,1,0.8);
    margin:0 !important;
    padding:2px 0!important;
}

header > div{
    margin:auto;
    display:block !important;
    background:red;

}

.left-in-header{
    background:green;

}

现在请看带有 class 的绿色 div .left-in-header，我想把它放在其父级的左侧！（它的大小是pure-u-3-8）。 （我的网站语言是波斯语，波斯语是从右到左，那么我的方向是rtl）

以及如何通过纯类将 div 置于其父级的中心？

4

2 回答 2

3

将以下 css 属性赋予：

.pure-u-3-8{
 float:left;
text-align:left;
}

margin:auto如果给定，则从 div itslef 及其父级中删除

于 2015-12-29T12:21:46.177 回答
1

使用 flexbox 可能是个好主意，它在定义时尊重文本方向，例如<html dir="rtl" ...>.

对齐可以通过设置display: flex和justify-content: flex-end（或不同，例如space-between或space-around，如果您希望以不同的方式对齐更多项目）到父级来实现。有关更多选项，请参阅本指南：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/ 。

于 2015-12-29T12:27:02.120 回答