个人中心
gpt4 book ai didi

html - css 布局、div 定位、对齐和 z-index 的问题

转载 作者：太空宇宙 更新时间：2023-11-04 00:29:04 25 4
gpt4 key购买 nike

我真的很纠结这个问题。下面是我想要实现的布局的图像。它有一些叠加层等。希望图像能更多地解释外观，我在内容中的两个列上遇到了真正的麻烦。我似乎无法将它们放在一起，背景位于底部，页脚显示在下方。

我希望这是有道理的。

还有一件事，这两个列应该比它们在图像上显示的方式高一点，它们应该出现在 #mainImage div 上方，仍在内容中，而不是下方。 Site design layout

更新

我已经更新了代码，希望能让您更好地理解我所追求的以及我遇到的问题。

    <html>
<head>
<style type="text/css">
body {
    background-color: #c0cdd7;
    color: #444444;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    text-align: left;
    font: normal normal 13px Arial, 'Lucida Grande', Verdana, Sans-Serif;
}
.wrapper {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}
#logo {
    position: absolute;
    background-color: white;
    margin-left: 30px;
    z-index: 10;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-image: url(../images/logo.gif);
    height: 100px;
    width: 300px;
}

#header {
    background-color: white;
    height: 50px;
    text-align: right;
    width: 100%;
}

#navigation {
    margin-left: 330px;
    position: absolute;
    margin-right: 30px;
    font-weight: bold;
    letter-spacing: 1px;
    word-spacing: 5px;
    font-size: 11px;
    color: #6caddf;
    margin-top: 25px;
    text-transform: uppercase;
    text-align: right;
    padding-bottom: 5px;
    padding-top: 5px;
    width: 600px;
}

#navigation li {
    padding-left: 10px;
    padding-right: 10px;
    border-right-color: #cccccc;
    border-right-width: 1px;
    border-right-style: solid;
    list-style-type: none;
    display: inline;
}

#navigation li.last {
    border-right-style: none;
    list-style-type: none;
}

#navigation li.active a {
    font-weight: bold;
    color: #6caddf;
    list-style-type: none;
}

#mainImage {
    background-color: #0b0b0b;
    position: relative;
    height: 400px;
    width: 960px;
    z-index: 1;
    margin-top: 0px;
}

#content {
    position: relative;
    padding: 30px;
    margin-top: -60px;
    width: 840px;
    margin-left: 30px;
    margin-right: 30px;
    background-color: white;
    z-index: 15;
}

#content .col1 {
    text-overflow: ellipsis;
    z-index: 0;
    width: 250px;
}

#content .col2 {
    float: right;
    padding-left: 30px;
    margin-left: 250px;
    z-index: 0;
    width: 570px;
}

#footer {
    border-top-color: #888888;
    border-top-width: 1px;
    border-top-style: dotted;
    color: #888888;
    padding: 30px;
    clear: both;    
}

#copyright {
    color: #888888;
    padding: 30px;
    clear: both;
    text-align: left;
    font-size: 9px;
}
</style>
<body>
<div id="header">
    <div class="wrapper">
    <div id="logo"></div>
    </div></div>
    <div class="wrapper">
    <div id="mainImage">
    </div>
    <div id="content">
    <div class="col1"><h1>Title</h1><p>Heights on these columns do not matter, just the positioning<br/>Hopefully you can see from this example that the columns aren't aligned, and the white background doesn't flow all the way down.</p></div>
    <div class="col2"><h1>Title</h1><p>Aliqui sita sint omnimaio corporporem. Nequam, nobis nis endam, omnis porecto experuptatae plitibus aped moditaquo te velia ventemporro commolu ptatum re pa si que cullaborem et molupta tiorit vendam, ulliquu ndeserc idest, optur? Quide cusdandel ipsandunt as ipsum reria corehendae vendipi ciisqui omnia nis re coriatu resciis eaquam fuga. Nam, sit res evendamus diam fuga. Odis quae num quibus consequamus expera alit fugiam, odis et volut ant aut vollaborae conecum rem quam fuga. Quis dolut poribus solorias sincias est velestiberum as quo tem ipsandit quaescienist volore dolum fuga. Ovid magnatque volum faciten imusam elentis auta quisquae parum quatur, optatur? At vitati ulpa velendis none preicit, sita quiatiaes evenihi llorum dis issimpe rchicitior solorepelit ut veliciant. Ur? Quia acime omniendipiet andis</p></div>
    </div>
    <div id="footer">
    <p>Just you standard footer/copyright info to go here 2011</p>
    </div>
    </div>
    </div>
</body>
</head>
</html>

最佳答案

并排的 div 应该向左浮动，然后在它们后面放置一个清晰的元素。

给你:

<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, images, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

body {
    background-color: #c0cdd7;
    color: #444444;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    text-align: left;
    font: normal normal 13px Arial, 'Lucida Grande', Verdana, Sans-Serif;
}

div {
    border: 1px solid red;
    margin:-1px;
}

.wrapper {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

#logo {
    position: absolute;
    background-color: white;
    margin-left: 30px;
    z-index: 10;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-image: url(../images/logo.gif);
    height: 100px;
    width: 300px;
}

#header {
    background-color: white;
    height: 50px;
    text-align: right;
    width: 100%;
}

#navigation {
    margin-left: 330px;
    position: absolute;
    margin-right: 30px;
    font-weight: bold;
    letter-spacing: 1px;
    word-spacing: 5px;
    font-size: 11px;
    color: #6caddf;
    margin-top: 25px;
    text-transform: uppercase;
    text-align: right;
    padding-bottom: 5px;
    padding-top: 5px;
    width: 600px;
}

#navigation li {
    padding-left: 10px;
    padding-right: 10px;
    border-right-color: #cccccc;
    border-right-width: 1px;
    border-right-style: solid;
    list-style-type: none;
    display: inline;
}

#navigation li.last {
    border-right-style: none;
    list-style-type: none;
}

#navigation li.active a {
    font-weight: bold;
    color: #6caddf;
    list-style-type: none;
}

#mainImage {
    position: relative;
    height: 400px;
    width: 960px;
    z-index: 1;
    margin-top: 0px;
    background-color:red;
}

#content {
    position: relative;
    padding: 30px;
    margin-top: -60px;
    width: 840px;
    margin-left: 30px;
    margin-right: 30px;
    background-color: white;
    z-index: 15;
}

#content .col1 {
    text-overflow: ellipsis;
    z-index: 0;
    width: 250px;
    background-color:red;
    float:left;
    border:0;
    height:300px;
}

#content .col2 {
    z-index: 0;
    width: 570px;
    background-color:green;
    float:left;
    margin-left:20px;
    border:0;
    height:300px;
}

#footer {
    border-top-color: #888888;
    border-top-width: 1px;
    border-top-style: dotted;
    color: #888888;
    padding: 30px;
    clear: both;    
}

#copyright {
    color: #888888;
    padding: 30px;
    clear: both;
    text-align: left;
    font-size: 9px;
}

.clr {clear:both;}
</style>

<div id="header">
    <div class="wrapper">
        <div id="logo"></div>

        <ul id="navigation">
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

<div class="wrapper">

    <div id="mainImage"></div>

    <div id="content">
        <div class="col1">&nbsp;</div>
        <div class="col2">&nbsp;</div>

        <div class="clr"></div>
    </div>

    <div id="footer"></div>

    <div id="copyright"></div>
</div>

代码还是很乱，但是你的问题已经解决了。

关于html - css 布局、div 定位、对齐和 z-index 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5117657/

25 4 0
文章推荐： c - 在 C 中传递整数作为引用和结构作为引用之间的区别
文章推荐： c - 错误 : invalid operands to binary expression ('float' and 'float' )
文章推荐： python - 矢量加法不起作用
文章推荐： 计算数组的平均值
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com