以HTML/CSS为中心的灵活大小布局

我需要创建一个登录页，它由一个顶部有文本的图像、下面的几个视频和一个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="" />

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

我该怎么做？

您可以通过在内容中添加包装并将左右边距设置为auto来轻松地完成此操作。使用%而不是像素。

<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;}

总布局是这样的吗？

<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/

围绕内容创建一个包装器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为它

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

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

相关内容

最新更新

热门标签：