Question

以下是相关的HTML：

    <div class="row">
        <div class="arrow box">&#9668;</div>Month Year<div class="dayMonth box"></div>&#9658;<div class="arrow box"></div>
    </div>

这是上面HTML链接到的.html文件的css：

*
{
    margin: 0; 
    padding: 0; 
} 

body
{
    font-family: "Times New Roman"; 
    font-size: 12pt; 

} 

.dayMonth
{
    width: 80%; 
}

.arrow
{ 
    width: 10%; 
}

.row
{
    width: 58em; 
    background-color: gray; 
    margin-right: auto; 
    margin-left: auto; 
}

.box
{
    float: left; 
    text-align: center; 
}

这是输出：

see description

“行”以浏览器为中心，但其中的内容（两个箭头和月份年份）没有按照我的意愿行事。

我认为这应该做的是，因为有两个箭头，它们的宽度都被发送到10％，然后dayMonth宽度是80％，所有div应该占据整个“行”（因为它们总和为100％）并且文本“Month Year”应该在“row”中居中，因为.dayMonth css类说它应该以div为中心，因为它的div应该是“row”的80％的中心。显然，这并没有发生。

我不想要一个不同的解决方案（本身）我想知道为什么我写的代码没有表达我希望它表达的想法，不按我想要的方式工作。

我认为我必须误解％如何控制宽度。 http://www.w3schools.com/css/pr_dim_width.asp表示％'的“以包含块的百分比来定义宽度”，看起来％应该按照我打算做的去做，所以我完全糊涂了。

我哪里出错了？

Answer 1

这在Opera中对我来说很好。

我注意到你在<div>之外有“月份年”。试着把它放进去，看看是否能修复它。

修改
再次使用最后一个箭头，它也在<div>标签之外。

您的HTML应该是这样的：

<div class="row"> <div class="arrow box">◄</div><div class="dayMonth box">Month Year</div><div class="arrow box">►</div> </div>

此外，执行此操作后，行<div>将没有高度，因此您可能需要明确设置高度（尝试20px）。

Answer 2

一旦我修复了你的HTML，它在FF中对我来说很好。你有空的div，月份年和左箭头不在他们各自的div中。

当我使用萤火虫时，我认为这很快。您应该使用firebug或chrome的开发人员工具进行调试。

Answer 3

<div class="row">
    <div class="arrow box">&#9668;</div><div class="dayMonth box">Month Year</div><div class="arrow box">&#9658;</div>
</div>

使用div中的内容尝试这样的代码。在FF，IE7 / 8和Chrome中为我工作。您可能希望对.row颜色使用十六进制值，例如＃333333 - 在任何浏览器中我都没有为IE渲染颜色。

Answer 4

首先，你的标记是错误的，这就是你看到问题的原因。它与不在div中但不在div中的内容有关，导致浮动元素出现高度问题。

以下是纠正的工作：

http://jsbin.com/ezari4/edit

使用％'设置HTML div的宽度

4 个答案: