div 定位问题

发布于 2024-07-08 16:42:00 字数 496 浏览 7 评论 0原文

我正在开发一个用 div 布局的网站。我特别遇到了一个问题：训练照片 div。

如果您访问 http://php.wmsgroup.com/eofd6.org/education。 html 您会在左侧导航下方看到一张已下拉的照片。我希望它紧贴在导航框下方。我已经尝试了几种不同的方法来调整其定位以及主要内容 div 的定位，但我无法得到正确的结果。

任何帮助，将不胜感激。样式表的链接是 http://php.wmsgroup.com/eofd6.org /in.css

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

穿越时光隧道 2024-07-15 16:42:00

#content 向右浮动，而不是向左浮动。

回复收藏 0 原文

白鸥掠海 2024-07-15 16:42:00

为了获得更可预测的结果，我将创建一个整体包装器，然后创建 2 个列包装器。您现在已经接近这个布局了，所以这将是一个简单的修复。

<html>
<head>
    <style type="text/css">
        #leftColumn {
            width: 30%;
            margin: 0px;
            float: left;
            display: inline;
            clear: left;
        }

         #rightColumn{
            width: 60%; /* allow 10% for flex/margins */
            margin: 0px auto;
            float: left;
            display: inline; 
            clear: right;
        }

    </style>
</head>
<body>
    <div id="pageWrapper">
        <div id="header"></div>
        <div id="leftColumn">
            <div id="nav"> </div>
            <div id="training_photo"> </div>
        </div>
        <div id="rightColumn">
             <div id="content"> </content>
        </div>
    </div>
    <div id="footer"> </footer>
</body>

In order to get more predictable results, I would create an over-all wrapper, then 2 column wrappers. You're close to this layout now, so it would be a simple fix.

<html>
<head>
    <style type="text/css">
        #leftColumn {
            width: 30%;
            margin: 0px;
            float: left;
            display: inline;
            clear: left;
        }

         #rightColumn{
            width: 60%; /* allow 10% for flex/margins */
            margin: 0px auto;
            float: left;
            display: inline; 
            clear: right;
        }

    </style>
</head>
<body>
    <div id="pageWrapper">
        <div id="header"></div>
        <div id="leftColumn">
            <div id="nav"> </div>
            <div id="training_photo"> </div>
        </div>
        <div id="rightColumn">
             <div id="content"> </content>
        </div>
    </div>
    <div id="footer"> </footer>
</body>

回复收藏 0 原文