HTML

Question

我正在尝试创建一个类似于此处附带的HTML。

我能够创建顶部，中间的n底部div。在中间div上，我需要另一个带有白色背景的div来保持左边的图像和右边的一些文本。在中间div的底部，我需要放置一些文字。

然后在底部div上，我需要放置一些其他文本。

已经出现了基本结构。但我需要一些关于中间div的叠加部分的帮助。我不知道如何放置中间div的白色部分，如附件中所示。

如果有人可以帮助我，那就太好了。

我为此创造了一个小提琴 http://jsfiddle.net/b2LNc/15/

<div id="top" class="top">
    <div id="text"></div>
</div>

<div id="middle" class="middle">
    <div id="productdetail" class="productdetail">


    <div id="image" class="image_container">
    <img id="product" class="product" src="">
    </div>
</div>
</div>

<div id="bottom" class="bottom">
    <h1>heading comes here</h1>
    <div id="desc">
Some text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text here
</div>
</div>

CSS

#top {
background-color: #777777;
    width: 977px;
    margin-left: auto;
    margin-right: auto;
height:120px;
}
#text{
    background-image:url("");
background-repeat: no-repeat;
    height: 60px;
}

#middle {
background-color: #f1f1f1;
    width: 977px;
    margin-left: auto;
    margin-right: auto;
    height:400px;
}
#bottom {
background-color: #e1e1e1;
    width: 977px;
    margin-left: auto;
    margin-right: auto;
 }
#bottom h1{
    padding: 25px 0 0px 37px;
    margin-bottom: 0px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
        margin-top: 0px;
}
#desc{
    padding: 10px 10px 20px 40px;
font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 13px;
color: #959595;
line-height: 20px;
}

Answer 1

叠加效果是通过为中间容器指定position: relative;来实现的，因此将其用作参考系统。包含的元素#overlay与top: -20px;具有相对位置，可将其拉高20px。

这个update对你的小提琴将解决中间div的问题。

HTML

<div id="container">
    <div id="top" class="top">
        <div id="text"></div>
    </div>
    <div id="middle" class="middle">
        <div id="overlay">
            <div id="productdetail" class="productdetail">
                <div id="image" class="image_container">
                    <img id="product" class="product" src="">
                </div>
                <div id="descr">
                </div>
            </div>
        </div>
    </div>
    <div id="bottom" class="bottom">
        <h1>heading comes here</h1>
        <div id="desc">
            Some text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text here
        </div>
    </div>
</div>

CSS

#container {
  position: relative;
}
#top {
  background-color: #000;
  width: 977px;
  margin-left: auto;
  margin-right: auto;
  height: 120px;
}
#text {
  background-image: url("");
  background-repeat: no-repeat;
  height: 60px;
}
#middle {
  background-color: #f1f1f1;
}
#overlay {
  background-color: #fff;
  width: 90%;
  height: 400px;
  position: relative;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
}
#bottom {
  background-color: #e1e1e1;
  width: 977px;
  margin-left: auto;
  margin-right: auto;
  /* height:120px;*/
}
#bottom h1 {
  padding: 25px 0 0px 37px;
  margin-bottom: 0px;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  margin-top: 0px;
}
#desc {
  padding: 10px 10px 20px 40px;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 13px;
  color: #959595;
  line-height: 20px;
}
#productdetail {
  background-color: white;
  position: relative;
  width: 90%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
#image {
  border: 3px #000 solid;
  display: inline-block;
  margin: 5px;
  width: 50%;
  min-height: 100px;
}
#descr {
  border: 2px #000 solid;
  display: inline-block;
  margin: 5px;
  min-height: 100px;
  width: 40%;
}

Answer 2

尝试我创建的这个标记，它干净且少得多。

HTML

<div class="wrapper">
    <div class="top"></div>
    <div class="mid">
        <div class="container">
            <p>Some Text Here</p>
            <div>IMAGE HERE</div>
            <div>DESCRIPTION HERE</div>
        </div>
    </div>
    <div class="bot"></div>
</div>

CSS

html, body, .wrapper { height: 100%; }
.wrapper { position: relative; }
.top { height: 15%; background: #222; }
.mid { height: 70%; background: #CCC; }
.bot { height: 15%; background: #777; }
.container { 
    position: absolute;
    background: #FFF; 
    padding: 20px; 
    width: 80%;
    top: 10%;
    left: 50%;
    margin-left: -40%;
    clear: both;
}
.container > div {
    float: left;
    width: 42%;
    height: 250px;
    padding: 1%;
}
.container > div:first-child {
    background: #EEE;
    float: left;
    width: 54%;
}
.container > p {
    position: absolute;
    bottom: -100px;
    right: 0;
    border: 1px solid #EEE;
    width: 50%;
    height: 70px;
}

JSFiddle：https://jsfiddle.net/b289cqkz/1/

我预定了.content > div和.content > p的高度，因为我没有确切的文字数据。您可以删除高度并插入实际数据以进行相应调整。

将一个div与图像和文本叠加在另一个上

2 个答案:

HTML

CSS