Question

我需要显示单页如下：

http://s18.postimg.org/epvzomt0p/P_62343_Patron_Roca_Ebrochure_R2_01_1.png

我做了一个实例 https://jsfiddle.net/dipchk/pua95mwg/1/

任何人都可以告诉我我需要在css中实现什么才能看起来像上面的图像

<body>

    <div class="wrapper">
        <div id="one">one</div>
        <div id="two">two</div>
      </div>
    </body>

    css
    .wrapper { 
        width: 90%;
        height: 90%;
        position: relative;
        background-color: white;

    }

    .wrapper div {

       padding: 10px;
    }
    #one {
      background:url('http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png') no-repeat;
        display: block;   
        position: absolute;
        width:70%;
        height: 50%;

    }
    #two { 
        background:url('http://s18.postimg.org/9zimjy25l/P_62343_Patron_Roca_Ebrochure_R1.jpg') no-repeat;
        position: absolute;  
        display: inline-block;
        width: 15%;
        height: 40%;

    }

Answer 1

你刚删除

位置：绝对;

并做你想做的事。

谢谢

Answer 2

很难准确理解你在问什么。

根据您显示的图片，请检查以下代码。

＆＃13;

body{margin:0; padding:0;}
.wrapper {
    position: relative;
    background-color: #ccc;  
}

.wrapper div {
  
}
#one {
  background:url('http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png') no-repeat;
    
    width:580px;
    height: 142px;
  margin:0 auto;
}
#two { 
    background:url('http://s18.postimg.org/9zimjy25l/P_62343_Patron_Roca_Ebrochure_R1.jpg') no-repeat;    
    width: 580px;
    height: 924px;
    margin:0 auto;
    
}

＆＃13;

<body>
 
  
<div class="wrapper">
    <div id="one">one</div>
    <div id="two">two</div>
  </div>
</body>

＆＃13;

Answer 3

请检查此解决方案

body{margin:0; padding:0;background:#ddd;}
.wrapper {
    position: relative;
    background-color: #fff;  
  width:580px;margin:0 auto;
  padding:40px 0;
  height:500px;
}

.wrapper div {
  
}
#one {
  
}
#one img {
  width:100%;  
}
#two{position: absolute;
right: 0px;
top: 72px;}

#two img {    
    width: 166px;
    
}

<body>
 
  
<div class="wrapper">
    <div id="one"><img src="http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png"></div>
    <div id="two"><img src="http://i.stack.imgur.com/rg43a.png"></div>
  </div>
</body>

图像没有显示在我的输出页面中

3 个答案: