0

要素を上と左から絶対に % で配置し、寸法を % で指定していますが、ウィンドウのサイズを変更すると、要素が互いに重なって移動します。

jQuery を使用して配置するか、他の方法を使用するか迷っています。ここにフィドルがありますフィドル

   .the_club_photo
 {
position:absolute;
width:100%;
height:40%;
top:60px;
left:0px;
background-color:#fff;
overflow:hidden;
 }
  .question_container
  {
position:absolute;
top:47%;
left:0px;
height:30%;
width:80%;
background-color:#2a2a2a;
  }


 .search_ur_club_container
{
position:absolute;
top:47%;
left:80%;
height:;
width:;
margin:auto 3px;
background-color:#2a2a2a;
}
4

1 に答える 1

0

これはあなたが達成しようとしていたことに近いと思います。意図したとおりに表示されない場合は、お知らせください。

http://jsfiddle.net/FhuMt/

HTML:

<div class="topSpacer"></div>
<div class="header">
    <div class="headerbg"></div>  
</div>
<div class="body">
    <div class="content">
    </div>
    <div class="navigation">
    </div>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  vertical-align: baseline;
  background-color:#1a1a1a;
}

.topSpacer {
    height: 60px;
}

.header {
    position: relative;
    width: 100%;
    padding-bottom: 25%;
}
.headerbg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(http://1.bp.blogspot.com/-Q4xE6-3pFqo/UToBOlRN3JI/AAAAAAAAADw/Jh8H293L_bo/s1600/Manchester+United2.jpg);
    background-size:cover;
    background-position: 50% 50%;
}

.body {

}

.content {
    width: 75%;
    background-color: #2a2a2a;
    float: left;
    min-height: 300px;
}

.navigation {
    width: 20%;
    margin-left: 5px;
    background-color: #2a2a2a;
    float: left;
    min-height: 300px;
}
于 2013-06-19T04:05:22.690 に答える