Question

我有这个HTML：

<div class="messageQuoted"><a href="#">user1</a> wrote :<br>
    <div class="messageQuoted"><a href="#">user2</a> wrote :<br>
        text1
    </div>
    text2
</div>

使用这个CSS：

.messageQuoted{
    background-color:#EAE9E8; 
    width:100%; 
    float:left;  
    margin-bottom:20px; 
    padding-left:10px; padding-top:5px; padding-bottom:5px; 
    border-left:4px solid #333333; border-right:1px #000000 solid; 
    border-bottom:1px #000000 solid; border-top:1px #000000 solid;
}

但你怎么能看到这个link，第二个div从容器中退出“text2”！

为什么呢？它是100％（或至少，直到容器有空间）。

右？我该如何解决？

Answer 1

如果您希望div为全宽，请完全删除width和float。默认行为是水平扩展。

Answer 2

这是因为盒子模型：padding值将被添加到100％宽度。

但是，如果未指定特定宽度，div将自动采用100％宽度，包括所有填充。如果删除这些行：

width:100%; 
float:left;

div将自动占用所有可用宽度。

宽度/长度与百分比的问题

2 个答案: