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

https://jsfiddle.net/xpzxysuy/2/CSS的位置是：相对影响文本位置

所以我玩弄一些基本的CSS学习它，我在哪里使用位置的特定div的情况下，遇到这样的事情：相对的，默认子文本的位置会受到影响（.right，第一行的绿色div）。在这种情况下，文本对齐也不会影响元素。

在这种情况下影响文本定位的唯一方法是在文本元素本身上使用css（任何注释掉的.words字节）。尽管在另一个div（.middle）中，文本对齐的文本却很好。这里发生了什么？

的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; 
}

编辑：为了澄清，我本来试图一行侧的div了一边。这可以使用我在css中注释过的“float：right”和“display：flex”方法。我想知道为什么“位置：相对”，虽然它正确定位div，使文本行为奇怪。也就是说，它的初始位置应该在div的左上角，但是它会出现在右上角，并忽略文本对齐。

来源

2015-10-28 Jeremy-SKA

你想达到什么目的？文本对齐对我来说工作得很好。 – DanMan

我只是想了解什么位置：相对于这种情况下的文本/为什么它正在发生以便更好地理解css。从我所看到的情况来看，绿色.right div中的文本一直在右侧，尽管文本对齐：左边是声明。正如我所说的，可以用边距和填充来控制文本，但我只是想知道为什么它的固有位置会从div的左上角更改为其他位置，以及为什么突然文本对齐不会影响文本。 –

看起来有一些倒塌的彩车：

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

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

我希望这有助于。

来源

2015-10-28 21:35:27 user4771351

您是否介意在这种情况下通过崩溃来阐述您的意思，以及如果可以，此修补程序如何工作？从我读过的内容来看，有两种类型的折叠：如果父元素中的所有元素都是浮动元素，并且其中一个垂直边距在触摸元素上折叠，则父元素的高度会崩溃。第一种类型不可能是这种情况，因为.right对于这个问题不是浮动的。更新小提琴后，只剩下3个div，左边，中间和右边（http://jsfiddle.net/xpzxysuy/5/）并取出所有边距，同样的问题仍然存在。 –

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

回答

相关问题