Question

HTML：

        <div id="container">

            <!-- Header -->
            <div id="logo">
                <img src="img">
            </div>

            <div id="header">
                <h1>Header</h1>
            </div>

            <!-- Nav -->
            <div id="nav">
                <ul>
                    <li><a href="#">nav</a></li>
                    <li><a href="#">nav</a></li>
                    <li><a href="#">nav</a></li>
                </ul>
            </div>

            <!-- Main Content -->
            <div id="content">
                <div id="mainContent">
                Content
                </div>

                <div id="imgOne">
                    <img src="img">
                </div>

                <div id="imgTwo">
                    <img src="img">
                </div>

                <div id="imgThree">
                    <img src="img">
                </div>
            </div>
        </div>
        <div id="footer">
            Footer
        </div>
    </body>
</html>

CSS：

* {
    margin: 0;
    padding: 0;
}

#container {
    width: 100%;
}

#logo {
    width: 150px;
    height: 200px;
    border: 3px solid black;
    float: left;
}

#header {
    text-align: center;
    border: 3px solid black;
}

#nav {
    clear: left;
}

#content {

}

目前看起来如何。

这就是它现在的样子。我希望标题不重叠并仍然保持在页面中心，我该怎么做？

很抱歉，如果帖子很草率，请先在这里发布＆amp;新编码。

Answer 1

这可以通过很多方式完成，具体取决于页面上其他内容的行为方式。

下面的示例只显示修复标题问题的方法。

＆＃34;标题＆＃34;添加＆＃34;保证金＆＃34;和＆＃34;填充＆＃34;确保标题文本是页面的中心，并且不与图像重叠。

＆＃13;

* {
    margin: 0;
    padding: 0;
}

#container {
    width: 100%;
}

#logo {
    width: 150px;
    height: 200px;
    border: 3px solid black;
    float: left;
}

#header {
    text-align: center;
    border: 3px solid black;
    margin-left: 156px;
    padding-right: 156px;
}

#nav {
    clear: left;
}

#content {

}

＆＃13;

<div id="container">

            <!-- Header -->
            <div id="logo">
                <img src="img">
            </div>

            <div id="header">
                <h1>Header</h1>
            </div>

            <!-- Nav -->
            <div id="nav">
                <ul>
                    <li><a href="#">nav</a></li>
                    <li><a href="#">nav</a></li>
                    <li><a href="#">nav</a></li>
                </ul>
            </div>

            <!-- Main Content -->
            <div id="content">
                <div id="mainContent">
                Content
                </div>

                <div id="imgOne">
                    <img src="img">
                </div>

                <div id="imgTwo">
                    <img src="img">
                </div>

                <div id="imgThree">
                    <img src="img">
                </div>
            </div>
        </div>
        <div id="footer">
            Footer
        </div>

＆＃13;

如何使标题的边框/其他内容与左侧的img不重叠？

1 个答案: