Question

所以我正在玩一些基本的CSS来学习它我遇到过这种情况，在使用position：relative的特定div的情况下，子文本的默认定位会受到影响（.right，the第一行的绿色div）。在这种情况下，Text-align也不会影响元素。

在这种情况下影响文本定位的唯一方法是在文本元素本身上使用css（.words中任何注释掉的部分）。虽然在另一个div（.middle）中，有一个同一个类的文本，text-align工作得很好。这是怎么回事？

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<div id="centerDiv">
    <div id="div1"> 
       <div class="left">
           <div class="circleDiv"></div>
       </div>
       <div class="middle">
           <p class="words">Try</p>
       </div>
       <div class="right">
           <p class="words">Word</p>
       </div>
    </div>
    <div id="div2">
        <p class="sentences">I'm a computer.</p>
    </div>
</div>
<div id="cleanDiv">
    In the digital world there's only three things to do.
</div>

CSS：

html, body {
    width: 100%;
    height: 100%;
}

#centerDiv {
    width: 50%;
    height: 50%;
    background: red;
}

#div1 {
    width: 100%;
    height: 50%;
    background: orchid;
}

#div2 {
    width: 100%;
    height: 50%;
    background: beige;

    text-align: right;
}

.left {
    position: relative;
    float: left;
    width: 15%;
    height: 100%;
    background: orange;
}

.circleDiv {
    position: relative;
    width: 80%;
    height: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: blue;
}

.middle {
    position: relative;
    float: left;
    width: 25%;
    height: 100%;
    background: yellow;
    /*left: 5%;*/
    text-align: center;
}

.right {
    width: 60%;
    height: 100%;
    background: green;

    /*
    float: right;
    text-align: center;
    */

    /*
    display: flex;
    justify-content: center;
    align-items: center;
    */

    position: relative;
    left: 40%;
    text-align: left;
}

.words {
    font-family: Times New Roman;
    font-size: 30px;
    color: pink;
    margin: 0 0 0 0;

    /*
    padding-top: 70px;
    padding-bottom: 70px;
    */

    /*
    height: 550%;
    line-height: 550%;
    */

    /*
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    */

}

.sentences {
    font-family: Times New Roman;
    font-size: 50px;
    color: purple;

    margin: 0 0 0 0;
}

修改：为了澄清，我原本试图将divs并排排列。这可以使用我在css中注释掉的“float：right”和“display：flex”方法。我想知道为什么“位置：相对”，虽然它正确地定位div，使文本行为奇怪。也就是说，它的初始位置应该位于div的左上角，而是显示在右上角，并忽略text-align。

Answer 1

看起来漂浮物上有一些崩溃：

.right {
    width: 60%;
    height: 100%;
    background: green;
    overflow: auto;
    position: relative;
    text-align: left;
}

删除了left: 40%;并添加了overflow: auto;

我希望这会有所帮助。

CSS位置：相对影响文本位置

1 个答案: