Question

我需要创建一个着陆页，其中包含一个顶部有文字的图像，下面有几个视频，还有一个2像素的带状线图像，我需要它才能粘到底部。

<html>
...
<body>

<img src="topimage.png" alt="" />

<table>
 <tr>
<td>Video 1 here</td>
<td>Video 2 here</td>

<img src="2pixelhightimage.png" alt="" />

我基本上需要它居中并相对于屏幕的大小看，所以基本上调整大小以补偿屏幕分辨率。

我该怎么做？

Answer 1

您可以通过在内容中添加包装并将左右边距设置为自动来轻松实现。使用％而不是像素。

<div class="wrapper">

 <img src="topimage.png" alt="">

 <!-- No need to use table here. Just use divs for layout stuff. -->
 <table>
  <tr>
   <td>Video 1 here</td>
   <td>Video 2 here</td>
  </tr>
 </table>

 <img class="fixed" src="2pixelhightimage.png" alt="">

</div>

然后是CSS：

.wrapper { margin: 0 auto;}
img { max-width:100%; height:auto;}
.fixed {position:fixed; bottom:0;}

Answer 2

总体布局是这样的吗？

<div class="wrap">
<div class="content">content goes here</div>
</div> 

.wrap
{
width:100%;
background:gray;
}
.content
{
width:80%;
margin:0 20%;
background:green;
}

http://jsfiddle.net/k25gU/

Answer 3

围绕内容创建包装器div

<div id="wrapper">
    <!-- content here -->
</div>

并像这样设计

#wrapper {
    width: 980px /* Maximum width of the content */
    max-width: 100% /* responsive width */
    margin: 0 auto; /* center the wrapper */
}

也不要在视频中使用表格。表格列不会在小屏幕上中断。使用

<ul class="videos">
    <li class="video">
        <!-- content here -->
    </li>
    <li class="video">
        <!-- content here -->
    </li>
</ul>

然后css他们

.videos {
    list-style: none; /* no bullets */
}
.videos .video {
    display: inline-block; /* videos side by side as long as there is space */
    width: 245px; /* 980px site width /4 = 245px = 4 videos in one row */
}

底部的粘性条带线可能是：

<div class="strip-line-bottom"></div>

和css for it

.strip-line-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: url(path/to/image.jpg) repeat-x;
}

有关详细信息，您必须提供更多信息; - ）

HTML / CSS为中心的灵活尺寸布局

3 个答案: