Question

我现在开始设计正确的标记和组织。现在，我的div边界有问题。它没有包含所有div的内容。

这是我的html代码段：

  <div id="paneMiddle"> 
  <div id="subPaneLatestItems">
        <p id="latestItemsTitle">Latest Shop Items:</p>
        <div>
        <img src="img/flower1.jpg" />
        <span id="itemName">Ballpen</span>
        <br/><span id="itemPrice">Php 90.00</span>
        </div>
     </div></div>

这是我的css：

div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}

为什么这不起作用？感谢

Answer 1

查看是否将clearfix类添加到div修复了任何内容

http://www.webtoolkit.info/css-clearfix.html

Answer 2

没有更多信息，我只能假设flower1.jpg和其他内容的组合比590像素宽。在CSS中为元素指定具体宽度时，将遵循该宽度，即使其内容较大。

另外，重要的是指出＆gt; IE中不支持直接后代选择器。

Answer 3

每当我遇到这样的麻烦时，我都会做一个最小的自包含示例进行测试。虽然我使用了本地图像，但这个功能完美无缺。当我将宽度减小到50像素时，图像会延伸到边框的右侧，因此这可能是您遇到的问题。在你的情况下，边界外面究竟是什么？

根据你浮动的进一步评论：离开图像div，以下显示可能是你的问题。如果运行此代码，您将看到第一个有边框的div不再包含图像。那是你看到的问题吗？

<html>
    <head>
        <style type="text/css">
            div#x{
                float:left;
            }
            div#paneMiddle>div{
                /*All divs that are children of div#paneMiddle*/
                width:590px;
                margin:5px 5px 5px 5px;
                position:relative;
                border-color:#FFCC33;
                border-style:solid;
                border-width:thin;
                position:relative;
            }
        </style>
    </head>
    <body>
        <div id="paneMiddle"> 
            <div id="subPaneLatestItems">
                <p id="latestItemsTitle">Latest Shop Items:</p>
                <div id="x">
                    <img src="img/flower1.bmp" />
                    <span id="itemName">Ballpen</span>
                    <br/>
                    <span id="itemPrice">Php 90.00</span>
                </div>
            </div>
            <div id="subPaneLatestItems2">
                Hello
            </div>
        </div>
    </body>
</html>

包括cleardiv修复程序（此处显示）似乎可以解决问题：

<html>
    <head>
        <style type="text/css">
            .clearfix:after {
                content: ".";
                display: block;
                clear: both;
                visibility: hidden;
                line-height: 0;
                height: 0;
            }
            .clearfix {
                display: inline-block;
            }
            html[xmlns] .clearfix {
                display: block;
            }
            * html .clearfix {
                height: 1%;
            }
            div#x{
                float:left;
            }
            div#paneMiddle>div{
                /*All divs that are children of div#paneMiddle*/
                width:590px;
                margin:5px 5px 5px 5px;
                position:relative;
                border-color:#FFCC33;
                border-style:solid;
                border-width:thin;
                position:relative;
            }
        </style>
    </head>
    <body>
        <div id="paneMiddle"> 
            <div class="clearfix" id="subPaneLatestItems">
                <p id="latestItemsTitle">Latest Shop Items:</p>
                <div id="x">
                    <img src="img/flower1.bmp" />
                    <span id="itemName">Ballpen</span>
                    <br/>
                    <span id="itemPrice">Php 90.00</span>
                </div>
            </div>
            <div id="subPaneLatestItems2">
                Hello
            </div>
        </div>
    </body>
</html>

Answer 4

请注意您的图片没有标题或更重要的替代文字可能您没有解决这个问题，但需要深入研究。备用文本允许用户了解可能存在的内容，例如图像未加载或图像关闭。如果用户使用屏幕阅读器，则图像描述对他们有用，这也是一个可访问性问题。

<img src="img/flower1.jpg" alt="Photo of a Daisy" title="This is a Daisy" />

<div> border不包含所有div的元素</div>

4 个答案: